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 属性。如果您稍后决定此数据是动态的，这将有助于限制所需 DOM 操作的数量。