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

Question

I have a parent component and a child component. In the parent component I defined the state which is passed as props to my child component. I'm also passing the function "onUpdateQuestion" in the props of the child component. This function will be executed every time the value of the input field of the child changes (so a re-render will occur).

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;
}

My child component never gets re-rendered again. Does this have something to do with the function setDescription() I'm executing in the child component?

What are the best practices for re-rendering the child correctly while working with models/interfaces?

Answer 1

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

The code above isn't actually using any new data from your form.

It should be...

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

So technically your code, never updating, is correct because it's always using new Question() which is created once, then never changes.