javascript – 如何在redux状态更改时更新组件状态?

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

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

语言是一个连接的道具,我检查它在商店中更新.

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

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

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

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

渲染部分:

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>
...
最佳答案

even though the store and the connected props change, the component’s state doesn’t update

编写它的方式,除非使用setState()显式更新状态,否则状态不会更新(很可能在componentWillReceiveProps()方法中).

当您将mapStateToProps()与Redux connect()HOC一起使用时,您将通过其道具将Redux状态映射到组件,因此在您的情况下,当Redux存储更新时,this.props.language将更新.

转载注明原文:javascript – 如何在redux状态更改时更新组件状态? - 代码日志