如何在redux状态更改时更新组件状态？

Question

由于我有一个带有表单的组件,我需要将表单连接到组件状态.初始数据来自Redux,因此尝试通过使用props设置状态来初始化和更新组件:

componentWillMount = () => {
  this.setState({
    language: this.props.language || 'en'
  })
}

language 是一个连接道具,我检查它是在商店更新.

const mapStateToProps = state => ({
  language: state.language
})

我还试图用componentWillReceiveProps和componentWillUpdate,但它不工作.我得到初始状态,即使商店和连接的道具发生变化,组件的状态也不会更新.

{this.props.language} // updates
{this.state.language} // doesn't change

从Redux数据管理表单的正确方法是什么？

---

该render部分:

render () {
  const {classes, theme, web} = this.props

  const language = (
    <CardContent>
      <Typography type="headline">
        Language
      </Typography>
      <Divider/>
      <form className={classes.container} autoComplete="off">
        <FormControl fullWidth margin="normal">
          <InputLabel htmlFor="language">Select Block</InputLabel>
          <Select
            value={this.state.language} // <==================== language
            onChange={this.handleLanguaheChange}
            input={<Input id="language"/>}
          >
            <MenuItem value={'en'}>English</MenuItem>
            <MenuItem value={'he'}>?????</MenuItem>
          </Select>
        </FormControl>
      </form>
    </CardContent>
  )
  ...

  return (
      <Grid
        container
        spacing={theme.spacing.unit * 3}
        justify={'space-between'}
        className={classes.gridWrap}
      >
        <Grid item xs={6}>
          <Card className={classes.card}>
            {language}
          </Card>
...

Answer 1

即使 store 和连接的 props 发生变化，组件的状态也不会更新

按照您编写的方式，状态不会更新，除非您使用setState()（最有可能在componentWillReceiveProps()方法中）显式更新它。

当您使用mapStateToProps()Redux HOC 时，您将通过其propsconnect()将 Redux 状态映射到您的组件，因此在您的情况下，当 Redux 存储更新时将会更新。this.props.language