javascript - React/Javascript如何循环遍历json文件并显示

Question

我目前有一个 json 文件，其中包含许多人的数据。它的格式如下:

    '1': {
        "name": Max
        "age": 8

    },

    '2':
        ....

接下来，我想在我的函数 Foo() 中将这些人中的每一个显示为链接。我写了下面的函数。

 import myData from './.../data.json'


 function Foo (){
    return (
        <div>
            <li>

                <Link to={`${url}/1`>{myData[1].name}</Link>}

            </li>
        </div>
    );
}

到目前为止，我已经手动完成了此操作。现在，我想做的是以某种方式创建一个循环并为所有人创建链接。我正在考虑使用“map()”和“Object.entries()”，但我不确定如何以及在哪里放置它们。我应该为他们创建一个新功能吗？我不确定......

Answer 1

您可以通过在 myData 上调用 Object.keys 并将键映射到链接来实现此目的。

import myData from './.../data.json'


function Foo (){
  return (
    <div>
        <li>
          {Object.keys(myData).map(key => <Link to={`${url}/1` key={key}>{myData[key].name}</Link>)}
        </li>
    </div>
);

这将循环遍历所有键("1"、"2" 等...)。您可以使用 myData[key] 获取实际项目。不要忘记在 Link 上设置 key 属性。如果您稍后决定此数据是动态的，这将有助于使用react以限制所需 DOM 操作的数量。