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

Posted 2023-02-22

【中文标题】将带有值的新键添加到嵌套对象数组中

【英文标题】：Add new key with Value to an array of nested Objects

【发布时间】：2022-01-02 22:34:37

【问题描述】：

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

constructor(props) 
    super(props);

    this.state = 
        data: null
;

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

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

enter image description here

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

【问题讨论】：

首先，在您发布的代码中，您没有显示任何有关您的问题的信息。其次，您想在元素内添加一个带有数字的“ID”字段和另一个字段？你可以试试map 函数。

@Giacomo 我目前没有任何关于我的问题的代码要显示。我只有用来解析 CSV 的代码。我从这里尝试了一些代码：***.com/questions/64830577/… 我知道我的问题几乎是重复的，但这对我不起作用。我当然更改了代码以使用我的代码。

如果您没有代码，Stack Overflow 可能是问您问题的错误平台：tour "不要问...您没有尝试过的问题找到答案（展示你的作品！）” 和How much research effort is expected of Stack Overflow users?

【参考方案1】：

您可以创建一个小型辅助函数，在您收到数据后（从任何来源 - 这里我只是将其作为道具传递给组件）以及在更新状态之前将其添加到数据中。

注意：在这个最小的工作示例中，我使用空数组而不是 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>

【讨论】：

您好，非常感谢您的帮助。我用我的头脑多一点，可以解决我的问题。我很沮丧，因为我没有太多时间了，我有点无法解决这个问题

【参考方案2】：

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

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

【讨论】：

非常感谢您的帮助。几个小时后，我用了更多的头脑并解决了我的问题。我没有太多时间，所以我想我会在这个论坛上提问。谢谢，祝你有一个美好的白天/夜晚