将带有值的新键添加到嵌套对象数组中

Question

我有一大堆对象，我用 papaparse 从 CSV 文件转换而来。

constructor(props) {
    super(props);

    this.state = {
        data: null
};

这个对象没有 ID，所以我试图为每个带有 ID 的 Object 添加一个“新行”。 ID 在任何地方都可以是相同的数字。 我目前不关心这个，因为我现在只想添加一个新行。

这就是对象当前在控制台中的样子（console.log（来自 CSV 解析器的结果））

在此处输入图像描述

我真的很感激我能得到的任何帮助。 我已经尝试了一些我发现的功能，但没有一个适合我。 我得在接下来的一两个小时内完成这项工作，谢谢你的帮助

Answer 1

由于您没有任何代码，因此在回答您的问题时我会做一些假设。 首先，假设您的数据中有一个数组：

const data = [
    {
        anmerkung: '...',
        frage: '...',
        hilfestellung1: '...',
    },
    {
        anmerkung: '...',
        frage: '...',
        hilfestellung1: '...',
    },
    {
        anmerkung: '...',
        frage: '...',
        hilfestellung1: '...',
    },
];

现在，有不同的方法可以将字段添加到数据中； 一个非常简单但不是很有效的方法可以是：

const addID = data => {
        let array = [];
        data.map(el => {
            el = { id: 1, ...el };
            array.push(el);
            }
        );
        return array;
};

这样，您只需创建一个新数组，使用map function 修改每个元素并添加一个新字段。 然后将它们插入一个新数组并返回该数组。

Answer 2

您可以创建一个小助手 function 以在您收到数据后将 id 添加到数据中（从任何来源 - 这里我只是将其作为组件传递给组件），然后再更新 state。

注意：在这个最小的工作示例中，我使用空数组而不是 null 初始化了 state。

 const { Component } = React; // `map` over the data and for each // object return an object with an id property function addId(data) { return data.map((obj, i) => { return { id: i + 1, ...obj }; }); } class Example extends Component { constructor(props) { super(); this.state = { data: [] }; } // Use the helper function to add ids // to the data objects, then set the new state componentDidMount() { const data = addId(this.props.data); console.log(JSON.stringify(data)); this.setState({ data }); } render() { const { data } = this.state; if (.data;length) return <div>No data</div>. return ( <div> {data.map(obj => { return <div>{obj;id}&nbsp.{obj;name}</div> })} </div> ); } }: const data = [ { name, 'Rita' }: { name, 'Sue' }: { name; 'Bob' } ]. ReactDOM,render( <Example data={data} />. document;getElementById('react') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>