Javascript 从子组件传递数据时，父状态未更新

我正在尝试在React中创建一个记笔记应用程序。 当使用输入框中的值按下“添加注释”按钮时，应用程序应添加新注释

不幸的是，当我尝试将注释推送到列表并更新父状态时，更改不会反映在屏幕或react调试器中

在警戒线上可以看到新的音符被推到列表中，但在其他任何地方都看不到

以下是包含原始notes状态的父组件：

class NoteApplication extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            notes: Array(),
        };
        this.update = this.update.bind(this);
        this.state.notes.push("Sample note");


    }

    update(notes) {
        return () => {
            this.setState({
              notes: notes
            });
         }
    }

    render() {
        return (
            <div>
                <h1>React Notes</h1>
                <div class="InsertBarDiv">
                    <InsertBar 
                    notes={this.state.notes}
                    update = {this.update}
                    />   
                </div>
                <div class="NotesDiv">
                    <Notes 
                    notes={this.state.notes}
                    />
                </div>
            </div>
        )
    }
}

class-NoteApplication扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
注意：数组（），
};
this.update=this.update.bind（this）；
此.state.notes.push（“示例注释”）；
}
更新（附注）{
return（）=>{
这是我的国家({
附注：附注
});
}
}
render（）{
返回(
反应音符
)
}
}

这是子组件

class InsertBar extends React.Component {

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

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
    }

    handleSubmit(event) {
        const notes = this.props.notes.slice();
        notes.push(this.state.value);
        this.props.update(notes);
        alert(notes);
        event.preventDefault();
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}> 
                    <input class="noteInsertBar" type="text" name="" onChange={this.handleChange}/>
                    <input class="insertBut" type="submit" value="Add Note"/>
                </form>
            </div>

        )
    }
}

类InsertBar扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
const notes=this.props.notes.slice（）；
notes.push（this.state.value）；
本.道具.更新（备注）；
警报（附注）；
event.preventDefault（）；
}
render（）{
返回(
)
}
}

类注释扩展了React.Component{
renderNote（一）{
返回(
{this.props.notes}
)
}
render（）{
返回(
笔记：
{this.renderNote（1）}
)
}
}

我希望注释被推送到注释列表的副本&父状态被设置为注释列表的新副本

---

我希望这会显示在屏幕上。

多亏了用户@WasaWasaWassup，我在react discord中得到了一些帮助，所以我想与大家分享解决我问题的方法

更改构造函数中的父状态以添加示例注释会导致问题

第二个问题是我的update函数返回了一个函数，但却被调用了，就好像它没有被调用一样

---

移除构造器并改变我的更新函数，只设置状态而不使用嵌入函数，修复了我的所有问题，notes数组更新和显示正确。

由于用户@WasaWasaWassup，我在react discord中得到了一些帮助，因此我想与大家分享解决我问题的方法

更改构造函数中的父状态以添加示例注释会导致问题

第二个问题是我的update函数返回了一个函数，但却被调用了，就好像它没有被调用一样

---

删除构造函数mutating&changing my update function以只设置状态而不使用嵌入函数修复了我的所有问题，notes数组更新并正确显示。

这可能是因为您从

update

返回了一个函数，当调用

update

时，您应该只调用

setState

：

update(notes) {
  setState({ notes });
}

旁注：在React中处理数组时，应避免使用

数组。按
。这样做很好，因为在推送之前调用
slice
来复制数组，但是如果使用
concat
或spread操作符，则不太可能无意中引入错误

const notes = this.props.notes.concat(this.state.value);

或：

这可能是因为您正在从
update
返回一个函数，当调用
update
时，您应该只调用
setState
：

update(notes) {
  setState({ notes });
}

旁注：在React中处理数组时，应避免使用
数组。按
。这样做很好，因为在推送之前调用
slice
来复制数组，但是如果使用
concat
或spread操作符，则不太可能无意中引入错误

const notes = this.props.notes.concat(this.state.value);

或：

是否希望显示注释数组？是否希望显示注释数组？