如何在 React 中映射 JSON 对象数组？答案

【问题标题】：How to map through the JSON array of objects in React?如何在 React 中映射 JSON 对象数组？
【发布时间】：2021-06-24 03:41:51
【问题描述】：

我从 API 返回中获得了一个 JSON 对象数组，但现在我无法获取其中一个数组的元素。在这里，我试图显示来自 docs 数组（20 个元素）的数据：

return(
 <ul>
  {books.docs.map((book, idx) => {
    return (
      <li key={idx}>
        <h3>{book.docs[idx].title}</h3>
        <p>{book.docs.creator[0]}</p>
      </li>
    );
  })}
 </ul>);

API return

我不断收到地图函数的错误：“books.map 不是函数”或“无法读取未定义的属性映射”，其中“books”是一个对象，它为我提供屏幕截图中的数据。关于如何解决问题的任何建议？

更新：这是我获取数据的方式：

  const Books = () => {

  const [books, setBooks] = useState([]);
  const [loading, setLoading] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");

  const fetchBooks = async () => {
    setLoading(true);
    try {
      const result = await axios.get(`${API_URL}`);
      setBooks(result.data);
    }
    catch (error) {
      setError(true);
    }
    setLoading(false);
  };

  const onInputChange = e => {
    setSearchTerm(e.target.value);
  }

  const onSubmitHandler = e => {
    e.preventDefault();
    fetchBooks();
  }

    return (
      <div>
        <div>
          <Search onSubmitHandler={onSubmitHandler} searchTerm={searchTerm} onInputChange={onInputChange} error={error} />
        </div>
        <div>
          <Loader loading={loading}>
            Fetching
          </Loader>
          <BookList books={books} />
        </div>
      </div>
    );}

【问题讨论】：

你是如何获取数据的？你在等待正确的回应吗？你在解析json吗？向我们展示这段代码
当您获取数据并且您的变量books 尚未填充响应时，您需要处理这种情况。可能会显示一个加载图标，然后在您有数据时呈现您的ul。
您可能会在组件挂载时获取数据，因此直到第一次渲染后很长时间才会获取数据，并且您正在尝试遍历一个空的书籍对象。如果您需要帮助，请阅读 how to ask 并编辑此问题以使其适用于 Stackoverflow
抱歉，我刚刚更新了帖子以显示我是如何获取数据的。

标签： reactjs

【解决方案1】：

试试这个。

   return(
     <ul>
      {books.docs.map((book, idx) => {
        const {title, creator} = book;
        return (
          <li key={idx}>
            <h3>{title}</h3>
            <p>{creator[0]}</p>
          </li>
        );
      })}
     </ul>);

你好像错过了这里的 [idx]

book.docs.creator[0]
book.docs[idx].creator[0]

【讨论】：

它仍然给我一个错误“无法读取未定义的属性'map'”...
需要添加null(undefined)校验条件

【解决方案2】：

你可以试试这个：

如果您的任何书籍对象为空。

return books.docs.length ?(
  <ul>
    {books.docs.map((book, idx) => {
      return book ? (
        <li key={idx}>
          <h3>{book.title ? book.title : ""}</h3>
          <p>{book.creator ? book.creator[0]:""}</p>
        </li>
      ) : null;
    })}
  </ul>
):null;

【讨论】：

【解决方案3】：

我可能是错的，但在获取数据之前，books 是一个空数组，所以books.docs 是未定义的，并且无法通过未定义的变量进行映射。

如果您在使用 .map() 之前检查是否定义了 books.docs 会发生什么？

return(
 <ul>
  {book.docs && books.docs.map((book, idx) => {
    return (
      <li key={idx}>
        <h3>{book.title}</h3>
        <p>{book.creator[0]}</p>
      </li>
    );
  })}
 </ul>);

const App = () => {
  const [books, setBooks] = React.useState([])
  
  React.useEffect(() => {
    // setTimeout() simulates the time needed to fetch the data from the api
    setTimeout(() => {
      setBooks({
        docs: [
          {
            title: 'Title',
            creator: [
              'Creator'
            ]
          },
          {
            title: 'Title2',
            creator: [
              'Creator2'
            ]
          }
        ]
      })
    }, 1000)
  }, [])
  
  return (
    <div>
      <ul>
        {books.docs && books.docs.map((book, idx) => {
          return (
            <li key={idx}>
              <h3>{book.title}</h3>
              <p>{book.creator[0]}</p>
            </li>
          );
        })}
      </ul>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector("#root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：