React fetch api 数据未显示

Question

我有一个仅在第一次渲染时运行的简单提取请求。当我用数据更新状态并尝试通过它进行映射时，没有显示任何内容。作为参考，我返回的数据只是一个条目。使用 .map 它应该为每个条目（即 1）显示一个项目符号，但没有显示任何内容。

{quote: "I'm the new Moses"}

import logo from './logo.svg';
import {useState,useEffect} from 'react';
import './App.css';

function App() {
  const [users, setUsers] = useState([])

  const fetchData = () => {
    fetch("https://api.kanye.rest/")
      .then(response => {
        return response.json()
      })
      .then(data => {
        console.log(data)
        setUsers(data)
      })
  }

  useEffect(() => {
    fetchData()
  }, [])

  return (
    <div className="App">
      <body className='App'>
        <div>
          {users.length > 0 && (
            <ul>
              {users.map(user => (
               <li>{user.quote}</li>
          ))}
        </ul>
      )}
    </div>
      </body>
    </div>
  );
}

export default App;

Answer 1

响应值{quote: "I'm the new Moses"}是一个对象，不是数组。无法映射。

保存时将响应值放在一个数组中。

const fetchData = () => {
  fetch("https://api.kanye.rest/")
    .then(response => {
      return response.json();
    })
    .then(data => {
      console.log(data);
      setUsers([data]);
    });
};

Answer 2

你得到的结果不是一个数组，而是一个对象。它无法映射。但是，您可以通过多种方式实现预期的行为。其中之一是在设置用户时将数据放入数组中。

setUsers([data])

React fetch api 数据未显示

React fetch api data not being displayed

reactjs

react-state