家长重新提交不会更新子道具

Question

我有一个父组件和一个子组件。 在父组件中，我定义了作为道具传递给我的子组件的状态。 我还在子组件的道具中传递了函数“ 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（）函数有关吗？

在使用模型/界面时正确重新渲染孩子的最佳实践是什么？

Answer 1

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

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

它应该是...

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

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