Javascript 包含数组的React映射对象

我正在构建一个获取以下JSON响应的应用程序：

{
  "result": [
    {
      "id": 6,
      "name": "Test 1",
      "parent": 5
    },
    {
      "id": 17,
      "name": "Test2",
      "parent": 5
    }
  }
}

我想映射结果，并显示在无序列表中

App.js：

function App() {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const searchDB = () => {
      fetch("http://127.0.0.1:8443/subColumns/5/?key=fc257229-8f91-4920-b71f-885403114b35", {
        mode: 'cors',
        credentials: 'include'
      })
        .then(res => res.json())
        .then(
          (json) => {
            setIsLoaded(true);
            setItems(json);
          },
          (error) => {
            setIsLoaded(true);
            setError(error);
          }
        )
    }
    searchDB();
  }, [])

  useEffect(() => {
    console.log(items.result);
  }, [items]);

  return (
    <ul>
      {(Object.entries(items)).map(item => (
        <li key={items.id}>
          {item.id} - {item.name} - {item.parent}
        </li>
      ))}
    </ul>
  );
}

函数应用程序（）{
const[items，setItems]=useState（[]）；
useffect（（）=>{
const searchDB=（）=>{
取回（“http://127.0.0.1:8443/subColumns/5/?key=fc257229-8f91-4920-b71f-885403114b35“{
模式：“cors”，
凭据：“包括”
})
.then（res=>res.json（））
.那么(
（json）=>{
setIsLoaded（真）；
setItems（json）；
},
（错误）=>{
setIsLoaded（真）；
设置错误（错误）；
}
)
}
searchDB（）；
}, [])
useffect（（）=>{
console.log（items.result）；
}，[项目]；
返回(

{（Object.entries（items））.map（item=>(

{item.id}-{item.name}-{item.parent}

))}

);
}

但是，当前输出显示地图仅运行一次，显示如下：

---

您不需要对象条目，只需执行以下操作：

 <ul>
  {items.result.map(item => (
    <li key={items.id}>
      {item.id} - {item.name} - {item.parent}
    </li>
  ))}
</ul>

{items.result.map（item=>(

{item.id}-{item.name}-{item.parent}

))}

{（Object.result.entries（items））.map（item=>(

{item.id}-{item.name}-{item.parent}

))}
试试这种方法

 items.result.map(({id, name, parent}) => 
       <li key={id}>
          {id} - {name} - {parent}
        </li>)

items.result.map（{id，name，parent}）=>

{id}-{name}-{parent}
）
我认为使用
map
进行迭代不是一个好主意
map
用于根据数组的返回值对数组进行迭代和更改。如果您只是想迭代和显示项目，请使用
forEach

Because he interested in the return value in this case a an array of list items `map` is a better fit for this
<ul>
  {items.result.map(item => (
    <li key={items.id}>
      {item.id} - {item.name} - {item.parent}
    </li>
  ))}
</ul>

因为他对本例中的返回值感兴趣，所以列表项数组'map'更适合这种情况

{items.result.map（item=>(

{item.id}-{item.name}-{item.parent}

))}

您需要像-

render() {

let tableBody = this.items.map((item, index) => (
        <tr key={index} id="one">
               <td>item.id</td>
               <td>item.name</td>
               <td>item.parent</td>
        </tr>
      ));

//And in the render return -
 return (
                 <table>
                   <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Parent</th>
                        </tr>
                   </thead>
                   <tbody>{tableBody}</tbody>
               </table>

  )

}

render（）{
让tableBody=this.items.map（（项，索引）=>(
item.id
item.name
item.parent
));
//在渲染返回中-
返回(
身份证件
名称
父母亲
{表体}
)
}
为什么不在返回中使用
items.results.map（item=>（…）
呢？感谢您的快速响应，非常感谢它
Array.forEach
始终
未定义的
。没错，这就是为什么它用于迭代的原因。当你想在迭代过程中根据返回值创建一个新的数组时，使用Map，所以它不适合这种情况，他只是想迭代并显示一个列表。我建议你阅读我刚刚做的，那篇文章进一步强调了我的观点。你可以在文章中看到，map方法是在转换列表的上下文中使用的，不仅用于迭代列表，还用于迭代列表并转换列表。很好，我现在明白了，我从来没有想过他需要结果，应该更好地阅读这个问题，谢谢
render() {

let tableBody = this.items.map((item, index) => (
        <tr key={index} id="one">
               <td>item.id</td>
               <td>item.name</td>
               <td>item.parent</td>
        </tr>
      ));

//And in the render return -
 return (
                 <table>
                   <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Parent</th>
                        </tr>
                   </thead>
                   <tbody>{tableBody}</tbody>
               </table>

  )

}