Question

我想接受请求并将数据映射到列表中。至少在尝试使用.map()函数之前，我至少可以在控制台中看到数据，然后突然，数据是不确定的。

这是我的代码，

function App() {

  const [clients, setClients] = React.useState(null);


    React.useEffect(() => {
      fetch('http://localhost:3000/api/client/list')
        .then(results => results.json())
        .then(data => {
          setClients(data.clients);
        });
    }, []);

console.log(clients)

clients.map((client) => (

    <div className="App">
      <header className="App-header">
  <p key={clients._id}>{clients.DisplayName}  </p>
      </header>
    </div>
  ))
}

export default App;

因此，如果我替换console.log(clients)之后的所有内容，那么至少可以在控制台中看到我的请求，并在“网络”标签中看到带有json的200响应

Answer 1

您正在从异步网络请求中检索客户端。您检索到的数据在您的setClients调用触发的第二个渲染周期之前不可用。第一次呈现此视图的客户端为null。访问clients.map会引发错误，因为null上没有地图功能。您可以在映射值之前利用逻辑&&运算符检查空值。此外，您的语法不完整。将代码更改为


return (
    <div className="App">
      <header className="App-header">
       {clients && clients.map((client) => (<p key={client._id}>{client.DisplayName}</p>)}
      </header>
    </div>
  )

这将确保clients.map调用仅在客户端不为null时运行。此技术称为conditional rendering。建议您阅读reactjs.org上的本指南和其他指南。

当我尝试使用map（）时，为什么我的GET响应未定义

1 个答案: