Javascript 在React中从JSON推送时仅存储最后一个变量的数组
我有一个名为“testing_numbers.JSON”的JSON文件：Javascript 在React中从JSON推送时仅存储最后一个变量的数组,javascript,arrays,json,reactjs,append,Javascript,Arrays,Json,Reactjs,Append,我有一个名为“testing_numbers.JSON”的JSON文件： [{ "number":1, "number":2, "number":3, "number":4, "number":4, "number":5, "number":6, "number":7, "number":9, "number":10, "number":11}] 我所要做的就是通过for循环将每个值推送到一个列表中，然后附加该列表。我的代码如下所示： import React, { Component }
[{ "number":1,
"number":2,
"number":3,
"number":4,
"number":4,
"number":5,
"number":6,
"number":7,
"number":9,
"number":10,
"number":11}]
import React, { Component } from 'react';
let values = require('./test_numbers.json');
class App extends Component {
state = { }
render() {
const numbers = []
for (var x in values) {
numbers.push(values[x].number)
}
return ( numbers );
}
}
export default App;
如果有人能帮忙，那就太好了问题不在于循环，而在于JSON。JSON是一个只有一个条目的数组，它是一个具有11个属性定义的单个对象，所有属性定义都使用相同的名称。解析该JSON的结果是一个具有单个属性的对象的数组，该属性的值是使用名称的上一个属性定义中的值。不能在对象中重复使用这样的名称编号，属性需要不同的名称 也许您希望JSON有一个包含多个对象的数组：
[
{"number":1},
{"number":2},
{"number":3},
{"number":4},
{"number":4},
{"number":5},
{"number":6},
{"number":7},
{"number":9},
{"number":10},
{"number":11}
]
const numbers = values.map(entry => entry.number);
问题不在于循环，而在于JSON。JSON是一个只有一个条目的数组，它是一个具有11个属性定义的单个对象，所有属性定义都使用相同的名称。解析该JSON的结果是一个具有单个属性的对象的数组，该属性的值是使用名称的上一个属性定义中的值。不能在对象中重复使用这样的名称编号，属性需要不同的名称 也许您希望JSON有一个包含多个对象的数组：
[
{"number":1},
{"number":2},
{"number":3},
{"number":4},
{"number":4},
{"number":5},
{"number":6},
{"number":7},
{"number":9},
{"number":10},
{"number":11}
]
const numbers = values.map(entry => entry.number);
在单个对象中使用相同的键和不同的值没有任何意义，一个对象应该包含唯一的键名以简化您的情况 将json更改为如下内容
[1,2,3,4,5,6,7,8,9,10,11]
render() {
return (
{values.map(val => <span key={val}>{val}</span>)}
);
}
或者为每个数字设置一个单独的对象。但是我看不出在每个对象中使用相同的键和不同的数字有任何意义，而是将它们保留为数字数组而不是对象在单个对象中使用相同的键和不同的值没有任何意义，一个对象应该包含唯一的键名以简化您的案例 将json更改为如下内容
[1,2,3,4,5,6,7,8,9,10,11]
render() {
return (
{values.map(val => <span key={val}>{val}</span>)}
);
}
或者为每个数字设置一个单独的对象。但是我不认为在每个对象中使用相同的键和不同的数字有任何意义，而是将它们保留为数字数组而不是对象我将不讨论这个问题，因为TJ的答案涵盖了这一点。但这里有一些工作代码，它使用对象数组，而不是具有所有相同属性键的数组中的单个对象。它使用map从对象数组生成一个新的数字数组。这里我使用了一个容器并返回了元素中的数字 常量数据=[{number:1}，{number:2}，{number:3}，{number:4}，{number:4}，{number:5}，{number:6}，{number:7}，{number:9}，{number:10}，{number:11}] 类应用程序扩展了React.Component{ 渲染{ 回来 {data.mapel=>{el.number}； } } ReactDOM.render，document.getElementById'root'
因为TJ的回答涵盖了这一点，所以我不会再讨论这个问题。但这里有一些工作代码，它使用对象数组，而不是具有所有相同属性键的数组中的单个对象。它使用map从对象数组生成一个新的数字数组。这里我使用了一个容器并返回了元素中的数字 常量数据=[{number:1}，{number:2}，{number:3}，{number:4}，{number:4}，{number:5}，{number:6}，{number:7}，{number:9} ，{编号：10}，{编号：11}] 类应用程序扩展了React.Component{ 渲染{ 回来 {data.mapel=>{el.number}； } } ReactDOM.render，document.getElementById'root'
或者，你知道，constnumbers=values.slice；；-很好的一点是，如果OP只是想要数字，那么拥有对象就没有多大意义。我尝试过这样做，但现在我得到了一个单独的错误，即对象作为找到的React子对象无效：具有键{number}的对象。如果要呈现子元素集合，请使用数组而不是第一个示例中的{numbers}和第二个示例中的{values.map…}是语法错误，它们不在JSX元素中。您需要删除{和}@freeza-这就是为什么会出现这个错误。或者，你知道，const numbers=values.slice；；-很好的一点是，如果OP只是想要数字，那么拥有对象就没有多大意义。我尝试过这样做，但现在我得到了一个单独的错误，即对象作为找到的React子对象无效：具有键{number}的对象。如果要呈现子元素集合，请使用数组而不是第一个示例中的{numbers}和第二个示例中的{values.map…}是语法错误，它们不在JSX元素中。您需要删除{和}@freeza-这就是为什么会出现错误。在我的答案中添加了完整的运行代码段。在我的答案中添加了完整的运行代码段。