如何在 express js 中从 Json 数据中渲染列表，然后使用 react 和 map() 渲染它？

Question

我有一个问题，在使用 react js 渲染 Json 数据时出现问题。 我无法从数据中对 map 做出反应。 这是我的代码：

我的 Json：

res.json({
    list: [{id: 1, name: 'Caleb'}, {id: 2, name: 'Isaiah'}]
})

我的反应代码：

import { useState, useEffect } from 'react'
  
function App() {

  const [data, setData] = useState({})

  useEffect(() => {
    fetch("/home")
    .then(res => res.json())
    .then(data => setData(data))
  }, [])

  return (
    <div>
        {data.list.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
    </div>
  );
}
  
export default App;

它给了我这个错误，它不能正确渲染它。

Answer 1

我首先将 Json 数据放入一个变量中，然后确保该变量不是未定义的，然后渲染它：像这样：

import { useState, useEffect } from 'react'
  
function App() {

  const [data, setData] = useState({})

  useEffect(() => {
    fetch("/home")
    .then(res => res.json())
    .then(data => setData(data))
  }, [])

  const new_data = data.list;

  const renderAuth = () => {
    if (new_data !== undefined) {
      return (
        <div>
          {new_data.map(function(d, idx){
            return (<li key={idx}>{d.name}</li>)
          })}
        </div>
      );
    } else {
      console.log("sorry had problems")
    }
  }

  return (
    <div>
      {renderAuth()}
    </div>
  );

}
  
export default App;

然后它就像一个魅力。 完全没有问题。

Answer 2

实现目标的最简单方法是使用条件渲染 (&&)，您可以将 JSON 数据放在变量中，但这不是必需的。 另一个改进是使用 object id 作为键而不是索引。

以下是如何改进代码的示例：

import { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState({});

  useEffect(() => {
    fetch("/home")
    .then(res => res.json())
    .then(data => setData(data))
  }, [])

  return (
    <div>
      {data.list && (
        data.list.map(function (d) {
          return <li key={d.id}>{d.name}</li>;
        })
      )
    </div>
  );
}

export default App;