Question

我发现自己的状态没有正确更新。如果您看到下面的代码console.log(this.props.clickedImage)给出了我期望的值，但console.log(this.state.items);没有给出。

我正在使用componentWillReceiveProps()对其进行更新，但是我不确定这是否是一个好方法。最好的方法是什么？

父母：

constructor(props){
    super(props);
    // set the state to handle which of the panes displays the information you want
    this.handleChildClick = this.handleChildClick.bind(this),
    this.state= {
        clickedItem: 'none',
    };
}

handleChildClick(src) {
    this.setState({ clickedItem: src });
}

render() {
    return (
        <div className="ao">
                <CharacterForm clickedImage={this.state.clickedItem}/>
                <SearchForm image_clicked={this.handleChildClick}/>

        </div>

    );
}

孩子A：

    constructor(props) {
        super(props);
        this.state = {
            items: [
                { name: "one", divStyle: this.props.clickedImage},
                { name: "two", divStyle: this.props.clickedImage},
                { name: "three", divStyle: this.props.clickedImage},
            ]
        };
    }

    componentWillReceiveProps(nextProps){
        if(nextProps.itemsLeft !==this.props.clickedImage){
            this.setState({

            })
        }
    }


    render() {
        console.log(this.props.clickedImage); 
        console.log(this.state.items);

        return this.state.itemsRight.map(item => (
            <FrameCharacter key={item.name} item={item} />
        ));
    }

孩子B：

render() {
    <img src="../images/misc/eq.png" onClick={() => image_clicked(eq.image)}/>
}

Answer 1

componentWillReceiveProps已过时。这种情况正是引入getDerivedStateFromProps挂钩的确切原因。它允许从道具派生状态，包括最初在构造函数中收到的道具：

static getDerivedStateFromProps(props, state) {
  return {
    items: [
      { name: "one", divStyle: props.clickedImage }
      ...
    ];
  }
}

请注意，props是getDerivedStateFromProps中的下一个道具。如果需要访问先前的clickedImage道具以完全替换componentWillReceiveProps，则clickedImage也可以存储到该状态。

在ReactJS中正确更新孩子的状态

1 个答案: