Question

我有以下名为“ 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循环将每个值推送到列表，然后追加列表。我的React代码如下：

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中的最后一个变量（为11），而不是之前的任何变量。看来我根本上有错。

我知道我可以先映射JSON，然后渲染它，但是对于我的应用程序来说，一次提取一个数据会更好。

如果有人能帮上忙，那就太好了

Answer 1

问题不是循环，而是JSON。您的JSON是只有一个条目的数组，它是具有11个属性定义且都使用相同名称的单个对象。解析JSON的结果是一个带有 single 属性的对象的数组，该对象的值是使用该名称的最后一个属性定义中的值。您无法像在对象内那样重复使用名称number，而需要不同的名称作为属性。

也许您希望JSON具有一个包含多个对象的数组：

[
    {"number":1},
    {"number":2},
    {"number":3},
    {"number":4},
    {"number":4},
    {"number":5},
    {"number":6},
    {"number":7},
    {"number":9},
    {"number":10},
    {"number":11}
]

另外：for-in不是用于遍历数组的正确工具。请参阅我的答案here，了解您使用的各种选择。例如，如果我没错，您的意思是要包含11个对象的数组，那么：

const numbers = values.map(entry => entry.number);

const values = [
    {"number":1},
    {"number":2},
    {"number":3},
    {"number":4},
    {"number":4},
    {"number":5},
    {"number":6},
    {"number":7},
    {"number":9},
    {"number":10},
    {"number":11}
];

class App extends React.Component {
  state = {  }
  render() { 
    const numbers = values.map(entry => entry.number);
    return numbers; // No need for () around it
  }
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

.as-console-wrapper {
  max-height: 100% !important;
}

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

Answer 2

在单个对象中使用相同的键具有不同的值是没有意义的，一个对象应包含唯一的键名以简化案例

将json更改为以下内容

   [1,2,3,4,5,6,7,8,9,10,11]

和

   render() { 
     const numbers = []
     for (var x in values) {
          numbers.push(<span key={x}>{x}</span>);
     }
     return ( {numbers} );
  }

或者简单地

   render() { 
     return ( 
          {values.map(val => <span key={val}>{val}</span>)}
     );
  }

或使其成为每个数字的单独对象。但是我看不出在每个对象中使用相同的键具有不同的编号，而是将它们保留为数字数组而不是对象的任何含义

Answer 3

因为TJ的回答涵盖了这一点，所以我不会讨论这个问题。但是这里有一些使用对象数组的工作代码（而不是具有所有相同属性键的数组中的单个对象）。它使用map从对象数组中产生一个新的数字数组。在这里，我使用了<ul>容器并返回了<li>元素中的数字。

const data = [{"number":1},{"number":2},{"number":3},{"number":4},{"number":4},{"number":5},{"number":6},{"number":7},{"number":9},{"number":10},{"number":11}]

class App extends React.Component {
  render() {
    return (
      <ul>
        {data.map(el => <li>{el.number}</li>)};
      </ul>
     )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

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

从React中的JSON推送时，数组仅存储最后一个变量

3 个答案: