Question

我正在做一个简单的todo-app，我尝试根据单击的笔记的 id 呈现 EditComponent ，以便可以在编辑便笺表格。我正在将活动注释ID存储在 父母的状态 中。第一次呈现 EditComponent 时，它会按预期工作。但是，当我使用 setState 更改 id 时，现有的渲染不会使用新的注释详细信息进行更新。单击特定笔记的“编辑”按钮后，将执行该功能

  setEditState = id => {
    this.setState({id,isEdit:true})
  }

这是我的父母render（）

render() {
    let form;
    if(this.state.isEdit){
      form = <EditComponent id={this.state.id} />
    }
    else{
      form = <AddComponent />
    }
    return (
      <div className="App">
        <ViewComponent notes={this.state.notes} setEditState={this.setEditState} deleteNote={this.deleteNote} />
        {form}
      </div>
    );
  }

我在这里填充 EditComponent 状态。

    async componentDidMount(){
        const note = await this.getNote(this.props.id)
        console.log(note.data.subject)
        this.setState({
            id:this.props.id,
            modifiedSubject: note.data.subject,
            modifiedNote: note.data.noteText
        })
    }

这是子render（）中编辑形式的输入之一

<input className="form-control" type="text" onChange={this.handleSubject} value={this.state.modifiedSubject} />

我的直觉：我不是因为使用 componentDidMount（）一次又一次更新它吗？如果是这样，当传递给子项的prop更改时，是否有任何生命周期方法可以执行？

预先感谢

Answer 1

您必须使用UNSAFE_componentWillReceiveProps() 。

Ref

更改属性后，React子组件不会重新呈现

1 个答案: