無法顯示 ReactJS 中的數據。錯誤：對象作為 React 子項無效。 如果您打算呈現子集合，請改用數組

Question

我正在嘗試顯示來自后端的數據，但出現錯誤：錯誤：對象作為 React 子項無效（找到：object，鍵為 {id、price、descr、link、sqf}）。 如果您打算渲染子集合，請改用數組。

我一直在尋找解決方案，我遇到了。map 但它不起作用再次引發錯誤。

import React, { useState, useEffect } from 'react';
import ArticleService from '../services/articles';

const Dashboard = () => {
  const [content, setContent] = useState('');

  useEffect(() => {
    ArticleService.articles().then(
      (response) => {
        setContent(response.data);
      },
      (error) => {
        const _content =
          (error.response &&
            error.response.data &&
            error.response.data.message) ||
          error.message ||
          error.toString();

        setContent(_content);
      }
    );
  }, []);

  console.log(content);
  return (
    <div className='container'>
      <h3>{content}</h3>
    </div>
  );
};

export default Dashboard;

內容的 console.log 如下所示：

如您所見，我定期獲取內容，只是無法在儀表板頁面上顯示。 當我嘗試{content.price}時，它消除了一個錯誤，但仍然沒有顯示任何內容。 有什么解決辦法嗎？？？

Answer 1

根據您的日志， content是一個對象數組，因此您希望將數組 map 轉換為有效的 JSX，例如，如果您想在div元素中呈現：

<div className="container">
  <h3>
    {content?.map((item) => (
      <div key={item.id}>
        <div>{item.price}</div>
        <div>{item.descr}</div>
      </div>
    ))}
  </h3>
</div>

此外，初始的 state 應該是一個空數組： useState([])來匹配預期的數據：

const Dashboard = () => {
  const [content, setContent] = useState([]);
  ...
};