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

Question

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

constructor(props) {
    super(props);

    this.state = {
        data: null
};

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

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

enter image description here

我非常感谢能得到的任何帮助。我已经尝试了一些我发现的功能，但其中 none 对我有用。我有点想在接下来的一两个小时内完成这项工作，所以谢谢你的帮助

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 函数修改每个元素并添加一个新字段。然后将它们插入一个新数组和 returns 数组。

Answer 2

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

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

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>

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

Add new key with Value to an array of nested Objects

javascript

arrays

reactjs

object

nested-object