新增JSON数据的status属性无法在前端表格正常渲染问题求助

问题根因 #

你新增数据时使用的字段名与表格渲染读取的字段名不匹配：

• 原始JSON数据、Table组件中读取的状态字段名为status
• 你在add_button.jsx中构建insertData对象时，错误地将状态字段的键名写为state，导致表格渲染时找不到对应值，显示为空。

修复方法 #

修改add_button.jsx文件中insertData对象的字段名，将state: props.state调整为status: props.state即可。

修改后的insertData代码片段：

const insertData = {
    serial_number: props.id,
    name: props.name,
    date: new Date().toISOString(),
    issue: props.issue,
    description: props.description.split(/[,.]/),
    status: props.state // 把键名从state改为status
};

可选优化建议 #

如果你当前使用的是全局静态dummyData变量存储数据，直接修改原数组不会触发React组件的自动重新渲染，建议将全局数据提升为父组件的state状态管理，修改时通过setState更新，确保视图能正确响应数据变化。

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