Question

我有操作和中间件，可以在其中进行提取请求。我在mapStateToProps中获得了数据。

但是我想在我的状态下使用这些数据并在setState中更改它们。如何将mapStateToProps添加到this.state？

我想在客户端过滤我的数据。如果我将动作发送到服务器，则不必这样做，因为我们的商店中都有所有列表。

Answer 1

一旦Redux存储更新（例如，分派的获取成功操作）并且组件接收到新值，就可以通过更新组件的状态来实现。

但是，这在大多数情况下不是惯用的，因为现在您必须处理本地组件状态和外部redux状态的可能不同步（可以从组件外部进行更新，并且这些新值将向下传递给我们组件）。
当然，您可以忽略这些更改，而对道具更改不做任何操作。
或反向-每次新道具到达时更新组件状态。

以下是同步道具和状态的示例：

// get `value` from store and pass it as prop to our component
const mapStateToProps = state => ({ value: state.someKey.value })

class Component extends React.Component {
  // new props has been passed
  // this method receives new props and current state
  // returns next state values, or null if no changes required
  static getDerivedStateFromProps(props, state) {
    // some complex comparison logic goes here
    // if true, then desync happened, let's update local state
    if (state.value !== props.value) {
      // this value will be at `this.state.value`
      return { value }
    }

    // else, no update needed for our state
    return null
  }

  // initial values taken from props
  state = { value: this.props.value }

  // update local state
  onChange = e => this.setState({ value: e.target.value })

  // let's render props value as label and state values as input value
  render() {
    return (
      <label>
        Props value is {this.props.value}
        <input value={this.state.value} onChange={this.onChange} />
      </label>
    )
  }
}

请注意，getDerivedStateFromProps是一种相对较新的生命周期方法（类似于“旧” componentWillReceiveProps）和this use case is mentioned in official docs as a possible sign of bad design.

TL； DR复制状态不好，尤其是在我们必须手动同步它的情况下。

Redux，反应。如何将mapStateToProps添加到this.state？

1 个答案: