反应状态已更改，无法重新呈现子级

Question

我想将两个子字段绑定在一起。 我在父类中创建了更改处理程序，并在子项的props中传递了状态值。 每当我在文本字段中键入内容时，父状态和子道具都会更新，我可以在react dev工具中看到它，但子状态不会得到反映。

下面是我的代码

class Parent extends React.Component{

    constructor(props){
        super(props);
        this.state = {value: "test"};
        this.changeHandler = this.changeHandler.bind(this);
    }

    changeHandler(value){
        this.setState({value: value});
    }

    render(){
        return (
                <div>
                    <Child value={this.state.value} change={this.changeHandler}/>
                    <Child value={this.state.value} change={this.changeHandler}/>
                </div>
                );
    }
}

class Child extends React.Component{

    constructor(props){
        super(props);
        this.changeHandler = this.changeHandler.bind(this);
        this.state = {value: this.props.value};
    }

    changeHandler(e){
        this.setState({value:e.target.value});
        this.props.change(e.target.value);
    }

    render(){
        return (
                <input type="text" value={this.state.value} onChange={this.changeHandler} />
                );
    }

}

ReactDOM.render(<Parent/>, document.getElementById('root'));

Answer 1

因为你在用

class Child extends React.Component{

    constructor(props){
        super(props);
        this.changeHandler = this.changeHandler.bind(this);
        // ...............  👇
        this.state = {value: this.props.value};
    }
    // ... 
}

内部的this.state.value在组件安装阶段仅设置为“一次”。
（ 这意味着，每当Parent -> this.state.value更改并导致Child组件重新呈现时， this.state = {value: this.props.value};不会再次调用 ）

而不是使用Child组件中的状态， this.props.value直接在<Input />字段上使用this.props.value 。

<input type="text" value={this.props.value} onChange={this.changeHandler} />

因此，流程是，有人在Child.input中Child.input ，该内容告诉Parent更新状态，然后将更改回滚到您的Child -> this.props.value 。

然后，您通过调用传递的this.props.changeHandler通知Parent。

因此，最终的Child组件将如下所示。

class Child extends React.Component{
    constructor(props){
        super(props);
        this.changeHandler = this.changeHandler.bind(this);
    }

    changeHandler(e){
        this.props.changeHandler({value:e.target.value});
    }

    render(){
        return (
          <input type="text" value={this.props.value} onChange={this.changeHandler} />
        );
    }

}

如果使用ES6“ 箭头函数 ”语法，则可以使其更小，从而无需this.changeHandler = this.changeHandler.bind(this) 。
（ 这是因为箭头函数不会创建自己的this而是使用调用上下文的this ）

class Child extends React.Component{
    constructor(props){
        super(props);
    }

    changeHandler = (e) => {
        this.props.changeHandler({value:e.target.value});
    }

    render(){
        return (
          <input type="text" value={this.props.value} onChange={this.changeHandler} />
        );
    }

}

或者，您可以直接从onChange调用它。

class Child extends React.Component {
  render() {
    return (
      <input
        type="text"
        value={this.props.value}
        onChange={this.props.changeHandler}
      />
    );
  }
}

通过将其转换为功能组件，我们可以走得更远（不要使用“功能”组件，因为它与功能编程无关）

function Child({ value, changeHandler}) {
  return <input type="text" value={value} onChange={changeHandler} />
}

// or
const Child = ({value, changeHandler}) => 
  <input type="text" value={value} onChange={changeHandler} />

当您使用const Child = ... ，请确保已将其声明为Parent之前。 但是，当您使用function Child ，由于JavaScript提升的工作原理，它可以显示在Parent之前或之后。

最后，不需要更改Parent 。

Answer 2

您需要实现componentDidUpdate

class Parent extends React.Component{

constructor(props){
    super(props);
    this.state = {value: "test"};
    this.changeHandler = this.changeHandler.bind(this);
}

changeHandler(value){
    this.setState({value: value});
}

render() {
    return (
            <div>
                <Child value={this.state.value} change={this.changeHandler}/>
                <Child value={this.state.value} change={this.changeHandler}/>
            </div>
            );
    }
 }

class Child extends React.Component{

constructor(props){
    super(props);
    this.changeHandler = this.changeHandler.bind(this);
    this.state = {value: this.props.value};
}


changeHandler(e){
    this.setState({value:e.target.value});
    this.props.change(e.target.value);
}

componentDidUpdate(prevProps) {
  if(prevProps.value !== this.props.value) {
      this.setState({value: this.props.value});
  }
}

render(){
    return (
            <input type="text" value={this.state.value} onChange={this.changeHandler} />
            );
}

}
ReactDOM.render(<Parent/>, document.getElementById('root'));

Answer 3

每个子组件都有其自己的独立状态。 如果要在两者之间共享该值，则可以将其从子级的状态中删除，而仅在子级中使用this.props.value。 然后，值仅在父级中是可变的。