Reactjs 在 useEffect API 调用后，useState 为作为 props 传递给组件的 json 数据设置的状态返回空数组

发布于02月26日

大家好，我还是React的初学者，我正在try 使用useEffect从API获取数据，然后使用useState设置状态，然后将该状态作为props 传递给子组件.

但在我的子组件中，每次执行控制台操作时，它都会显示为一个空array.日志(log)我知道在第一次渲染时，我的初始useState的状态是一个空数组[].但我一直在努力解决这个问题，并发送正确的json数据，但似乎无法做到这一点.

我正在try 这样做，因为我有多个子组件，我想发送数据到.

下面是我编写的一个变通方法，其中包括一些变通方法，但也不起作用:

   const api = 'url string'
    const [races, setRaces] = useState([]);
    const [races2, setRaces2] = useState([races]);

    useEffect(() => {
    fetch(api)
      .then((resp) => resp.json())
      .then((response) => setRaces(response));
  }, []);

  useEffect(() => {
    if (races.length) setRaces2(races);
  }, [races]);

<Child data={races2}

但当我这样做的时候，这似乎也不起作用.在子组件中记录(props.data).

这是人们通常获取数据并try 发送数据的方式，但在这两种情况下都是一样的.

   const api = 'url string'
    const [races, setRaces] = useState([]);

    useEffect(() => {
    fetch(api)
      .then((resp) => resp.json())
      .then((response) => setRaces(response));
  }, []);

<Child data={races}

下面是一个粗略的流程图，解释了我想做的事情:

提前感谢您的帮助.

import "./styles.css"; import ChildComponent from "./ChildComponent"; import { useEffect, useState } from "react"; export default function App() { const [title, setTitle] = useState(null); // * Init on Page Load useEffect(() => { fetchTitle(); }, []); const fetchTitle = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts/1" ); const data = await response.json(); setTitle(data.title); //Setting the response into state }; return ( <div className="App"> <ChildComponent data={title} /> </div> ); }

Reactjs 在 useEffect API 调用后，useState 为作为 props 传递给组件的 json 数据设置的状态返回空数组

推荐答案

Reactjs相关问答推荐

当我在React中使用类方法更新模型的状态时，它在严格模式下触发两次

从另一个组件更改组件中const的状态

以下代码是否存在安全问题？

ReactJs；Reaction-Hook-Form：仅当 Select 了特定 Select 列表选项时才显示文本输入

Next.js：提交表单时状态尚未就绪

FireBase未与Reaction应用程序连接

在数组对象内的数组上进行映射

更改点几何体的坐标会将其隐藏

React路由dom布局隐藏内容

如何根据ReactJS中元素列表中的布尔值仅显示一次值

从 redux 调用UPDATE_DATA操作时状态变得未定义

如何测试使用 React.createportal 呈现的组件？

为什么刷新页面时我的localStorage PET值变成空字符串？

React - 拖放 UML

Wordpress 插件在激活时创建一个 React Public 页面

如何避免在 react useEffect 上滚动时出现小的延迟？

具有自动完成功能的 Formik material ui 无法按预期工作

react 路由dom没有路由匹配位置错误/在路由中制作组件

如何将 id 从页面传递到另一个页面？

在状态中存储多个选定的选项