React类组件如何将子组件传递的JSON对象通过setState更新到父组件状态

问题根源 #

你当前的代码核心问题是键名不匹配：Form组件提交的新对象键名为input1/input2，但Data.js原始数据、Items组件渲染时读取的键名是title/details，所以哪怕状态更新了也无法正常渲染新增条目，另外Items组件遍历列表没有加唯一key会触发React警告。

修改方案 #

1. 修正Form.js的insertIt方法 #

把提交的新对象键名改成和全局统一的title、details，可选增加提交后清空输入框的逻辑：

insertIt(e){
    e.preventDefault();
    const newItem = {
        title: this.state.input1,
        details: this.state.input2,
    }
    this.props.onsubmit(newItem);
    // 提交后清空输入框，优化体验
    this.setState({
        input1: '',
        input2: ''
    })
}

2. 修正App.js的updateList方法 #

你原本的函数式setState写法本身是正确的，只需要补充空值校验避免插入无效数据即可：

updateList(dataa){
    // 简单校验，过滤空数据提交
    if(!dataa.title.trim() || !dataa.details.trim()) return;
    this.setState(ps=> ({
      listState: [
        ...ps.listState,
        dataa
      ]
    }));
}

可选优化：修复Items组件的key警告 #

修改遍历逻辑，给每个渲染条目加唯一key：

{this.props.listofitems.map((i,index)=> (
    <center key={index}>
        <h2>{i.title}</h2>
        <p>{i.details}</p>
    </center>
))}

修改完成后提交表单即可正常把新增条目追加到列表底部渲染。

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