修改React组件状态时触发this.props.map is not a function错误

核心错误原因 #

数组的push()方法会直接修改原数组，并且返回值是数组的新长度（数字类型），而非新数组。你在add_note_and_log方法中，把push()的返回值赋值给了logs和notes状态，导致原本的数组状态被替换成了数字。当子组件尝试对数字调用map()方法时，就会抛出map is not a function的错误。

修复步骤 #

1. 修正状态更新逻辑 #

替换push()为展开运算符创建新数组，既避免修改原状态，又能正确维护数组类型：

add_note_and_log = () => {
    const value = this.state.textfield;
    this.setState({
        logs : [...this.state.logs, {
            id : uuidv4(),
            text : value // 与初始化时的字段保持一致，原代码误写为desc
        }],
        notes : [...this.state.notes, {
            id : uuidv4(),
            text : value // 同上，统一字段为text
        }],
        textfield : ""
    });
}

同时修正了字段不匹配问题：初始化数组元素时用的是text字段，添加新元素时误写为desc，会导致渲染时内容为空。

2. 修正ListFlexDisplay组件的按钮事件 #

原代码中按钮的onClick直接写console.log(...)会在组件渲染时就执行，且打印的this.props.elements不存在，需调整为：

<button 
    className="collapsible-container__activator" 
    onClick={() => console.log(this.props.newElements)}
>
    {this.props.buttonTitle}
</button>

优化补充（可选） #

可以给add_note_and_log增加空值判断，避免添加空内容：

add_note_and_log = () => {
    const value = this.state.textfield.trim();
    if (!value) return; // 空内容时直接返回
    this.setState({
        logs : [...this.state.logs, {
            id : uuidv4(),
            text : value
        }],
        notes : [...this.state.notes, {
            id : uuidv4(),
            text : value
        }],
        textfield : ""
    });
}

内容的提问来源于stack exchange，提问作者rustscr1pt