ReactJS

Question

在 React 应用程序中，我试图将键值对数据添加到现有数据，但它不起作用。

当前静态数据为，

const result = [{
 {id: 0, important: false, name: "Shruthi R", phone: "9834233433", email: "shruthi@gmail.com", work: "NicheSoft", city: "Mysore"},
 {id: 1, important: false, name: "Paridhi Sharma", phone: "8856544422", email: "paridhi@gmail.com", work: "MicroTech", city: "Lucknow"}
];

我正在尝试通过表单向此 result 添加数据并获取 this.props.location.state 格式的数据。

现在我想将id添加到新创建的数据{important: false, name: "Sona", phone: "23423433", email: "sona@yopmail.com", work: "IBM", city: "Delhi"}

我试过把它加进去

this.setState(Object.assign(this.props.location.state, {id: result.length}))
this.setState({list: result.concat(this.props.location.state)});

方式，但它已经像[{...}, id: 3]一样单独添加了。如何将 id 添加到最近添加的哈希数据中？

我想要像 {important: false, name: "Sona", phone: "23423433", email: "sona@yopmail.com", work: "IBM", city: "Delhi", id: 3} 或 {id: 3, important: false, name: "Sona", phone: "23423433", email: "sona@yopmail.com", work: "IBM", city: "Delhi"} 这样的输出，这应该附加到现有的 result 数组。

Answer 1

试试这个方法，

this.setState(prev => ({list: [...prev, {...this.props.location.state, id:3}] })

const arr = [
 {id: 0, important: false, name: "Shruthi R", phone: "9834233433", email: "shruthi@gmail.com", work: "NicheSoft", city: "Mysore"},
 {id: 1, important: false, name: "Paridhi Sharma", phone: "8856544422", email: "paridhi@gmail.com", work: "MicroTech", city: "Lucknow"}
];

const result = {important: false, name: "Sona", phone: "23423433", email: "sona@yopmail.com", work: "IBM", city: "Delhi"};


const newArray = [...arr, {...result, id:3}]

console.log(newArray);

Answer 2

我看到至少两个快速解决方案：

您创建对象（包括其 ID 属性），然后将其添加到结果数组。
您将 id 属性添加到结果数组中的最后一个对象（因为您谈论的是“新创建的数据”，所以我假设它始终是最后一项）。如果是这种情况，您可以使用 result.length -1

ReactJS - 如何将键值对添加到数组？

ReactJS - How to add a key value pair to an array?

arrays

hash

react-props