React 不渲染来自 useEffect 内部的 fetch 数据

Question

与此类似：但数据源自 fetch() 并且有一个嵌套的 .then 以获取数据对象 data.list_helado，这是一个字典列表。

为什么数据不会在页面上呈现？

import React, { useEffect, useState } from "react";
import {Helados} from "../components/Helados";

function BiteroInfoPage() {

  // Initate array of helados (a data object of type dict) and their states
  const [helados, setHelados] = useState([]);

  // Fetch the list of helados initialized from database
  useEffect(() => {
  fetch("/list_initialized")
    .then((response) => response.json())
    .then((data) => {
      const updatedData = [...data.list_helado];
      setHelados(updatedData);
    });
}, []);

  return (
    <div className="biteroInfo">
      <h1>Bitero Segments</h1>
      <Helados prop={helados}/>
    </div>
  );
};

export default BiteroInfoPage;

其中 Helados.js 是：

import React from 'react';
import { List, Header} from "semantic-ui-react"

export const Helados = ({prop}) => {
console.log(prop)
console.log("Above returns: (4) [{…}, {…}, {…}, {…}]")
    return (
        <List>
            {prop.map((helado, index) => {
                return (
                    <List.Item key={index}>
                        <Header>{helado.study_name}</Header>
                    </List.Item>
                );
            })}
        </List>
    );
};

Answer 1

将您的 useEffect 更新为如下所示。您没有正确处理 response.json()。你不应该有任何嵌套调用。

useEffect(() => {
  fetch("/list_initialized")
    .then((response) => response.json())
    .then((data) => {
      const updatedData = [...data.list_helado];
      setHelados(updatedData);
    });
}, []);

React 不渲染来自 useEffect 内部的 fetch 数据

React not rendering data from fetch inside useEffect

javascript

reactjs

fetch-api

react-hooks

use-effect