Question

更新：

我有一个问题要问你。在我的反应应用中，我有如下的基本状态。

constructor(props){
    super(props);
    this.state = {
        title: "Hello";
    }
}

并且认为我有按钮和onClick事件我添加新的动态键状态。假设[key] =“newValue”和“val”= 1。

onClickEvent(){
    let splitArray = value.split('_');
    let key = splitArray[0];
    let val = splitArray[1];
    this.setState({
        [key]: val
    });
}

render(){
        return(
        <div>
            <button onClick={this.onClickEvent}>Click</button>
             <input value={} />
        </div>
        );
}

到目前为止，一切都很好。但我不知道如何使用这个动态创建的新状态属性，以防我的例子[key]。

在render方法中，我的输入值为空，因为我在状态中没有值。

在点击事件之后，我添加了新的状态键，我想要这样的渲染。

render(){
        return(
        <div>
            <button onClick={this.onClickEvent}>Click</button>
            <input value={this.state.[key]} />
        </div>
        );
    }

是否有反应组件的生命周期方法，检测添加的新状态属性？因为我想使用新创建的状态属性。

我希望我的问题很明确。

Answer 1

将钥匙存放在您所在的州。

this.setState({
  [key]: val,
  updatedKey: key
})

然后你可以实现componentDidUpdate并使用密钥来读取新的状态值。

componentDidUpdate() {
  let { updatedKey } = this.state;
  let val = this.state[updatedKey];
}

Answer 2

看看：https://reactjs.org/docs/react-component.html#componentwillreceiveprops

您可以使用以下

componentWillReceiveProps(nextProps){
      ...
    }

Answer 3

您不需要生命周期方法来获取该值，也可以将密钥置于该状态：

onClickEvent(){
    const [currentKey, value] = value.split('_');
    this.setState({
        currentKey,
        [currentKey]: val
    });
}

并在下一个渲染周期中使用以下命令访问它：

this.state[this.state.currentKey];

Answer 4

我认为ComponentDidUpdate正是您所寻找的。您可以像这样检测新的状态键。

componentDidUpdate(prevProps, prevState){
  var prev = Object.keys(prevState).sort();
  var current = Object.keys(this.state).sort();
  if(JSON.stringify(prev) === JSON.stringify(current)){
    do something
  }
}

是否有任何生命周期方法来了解添加到组件状态的新状态键？

4 个答案: