在反应 UI 中呈现嵌套的 json 响应数据

Question

这是正在获取的 json 的结构。我正在尝试通过 react 将一些嵌套线程数据呈现到网页。

import react, {useState, useEffect} from "react";
import axios from 'axios'
import ReactJson from 'react-json-view'

const FeaturedBoards = () => {
    const [boards, setBoards] = useState([{page: '', threads: {}}]); 

useEffect(() => {
    fetchBoards();
}, []);

const fetchBoards = () => {
    axios.get('https://a.4cdn.org/po/catalog.json')
    .then((res) => {
        console.log(res.data);
        setBoards(res.data);
    })
    .catch((err) => {
        console.log(err);
    });
};
    if(boards === 0) {
        return <div>Loading...</div>;
    }
    else{
    return (
        <div>
            <h1>Featured Boards</h1>
            <div className='item-container'>
                {boards.map((board) => (
                    <div className='board' key={board.id}>
                        <p>{board['threads']}</p>
                    </div>
                ))}
            </div>
        </div>
    );
    }
};

export default FeaturedBoards;

我已经尝试了所有方法来显示一些嵌套线程数据，但没有任何结果。我已经尝试过第二次调用 map on board 但没有运气，将它存储在一个变量中并从中调用仍然没有。我做错了什么吗？

Answer 1

我相信How can I access and process nested objects, arrays or JSON?. 更全面地回答了这个问题，但要解释这个特定的数据结构，请继续阅读。

---

查看您的实际数据...boards 是一个数组。其中的每个元素都是一个具有page (int) 和threads (array) 属性的对象。每个threads 数组元素都是一个具有其他属性的对象。您可以使用map 来迭代数组并返回其中对象的 JSX 表示。

例如

const [boards, setBoards] = useState([]); // start with an empty array
const [loading, setLoading] = useState(true)

useEffect(() => {
  fetchBoards().then(() => setLoading(false))
}, []);

const fetchBoards = async () => {
  const { data } = await axios.get('https://a.4cdn.org/po/catalog.json')
  setBoards(data)
}

return loading ? <div>Loading...</div> : (
  <div>
    <h1>Featured Boards</h1>
    <div className="item-container">
      {boards.map(board => (
        <div className="board" key={board.page}> <!-- ? note "page", not "id" -->
          {board.threads.map(thread => (
            <p>{thread.name}</p>
            <p>{thread.sub}</p>
            <p>{thread.com}</p>
            <!-- etc -->
          ))}
        </div>
      ))}
    </div>
  </div>
)