父级重新渲染不更新子道具答案

【问题标题】：Parent rerender doesn't update child props父级重新渲染不更新子道具
【发布时间】：2018-12-28 05:07:47
【问题描述】：

我有一个父组件和一个子组件。在父组件中，我定义了作为道具传递给子组件的状态。我还在子组件的 props 中传递了函数“onUpdateQuestion”。每次子输入字段的值发生变化时都会执行此函数（因此会发生重新渲染）。

export default class Parent extends React.PureComponent<{},{question:Question}> {
  public state = {
    question: new Question()
  };

  public onUpdateQuestion = (): void => {
    let _question = this.state.question; 
    this.setState({ question: _question });
  };

  public render(): React.ReactNode {
    return (
      <QuestionEditorChild
      question={this.state.question}
      onUpdateQuestion={this.onUpdateQuestion}/>);
  }
}

class QuestionEditorChild extends React.Component<{question: Question; onUpdateQuestion: Function;}> {
  render() {
    console.log(this.props.question.description);

    return (
      <div>
        <h2>Question</h2>
        <input
          value={this.props.question.description}
          onChange={e => {
            this.props.question.setDescription(e.target.value);
            this.props.onUpdateQuestion();
          }}
        />
      </div>
    );
  }
}

class Question implements IQuestion {
  public description: string;

  constructor(question?: IQuestion) {}

  public setDescription(value: string): void {
    this.description = value;
  }
}

interface IQuestion {
  description: string;
}

我的子组件再也不会重新渲染。这和我在子组件中执行的函数 setDescription() 有关系吗？

在使用模型/接口时正确重新渲染子级的最佳做法是什么？

【问题讨论】：

有一篇文章Lifting State Up是React开发者写的。

标签： javascript reactjs

【解决方案1】：

public onUpdateQuestion = (): void => {
    let _question = this.state.question; 
    this.setState({ question: _question });
};

上面的代码实际上并没有使用表单中的任何新数据。

应该是……

onUpdateQuestion = (incomingData) => {
    this.setState({ question: incomingData })
}

所以从技术上讲，您的代码从不更新，是正确的，因为它始终使用新的Question()，它只创建一次，然后永远不会改变。

【讨论】：