从 API 获取数据后立即将数据从父组件传递到子组件时出现问题。（仅功能组件）

Question

我需要将从 API 获取的数据传递给子功能组件。下面，您将看到我在尝试失败时所遵循的步骤。

这是从随机 API 获取数据的 parent 组件：

import React, { useState, useEffect } from 'react';
import SideMenu from '../Components/SideMenu';

export default function ProductsPage() {
  const [products, setProducts] = useState([]);

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

  const fetchProducts = async () => {
    const url = 'https://restcountries.eu/rest/v2/all';
    const data = await fetch(url);
    const items = await data.json();
    setProducts(items);
  };

  return (
    <div>
      <SideMenu prods={products} />;
    </div>
  );
}

这是 child 组件，应该从父组件接收 props。这无法更改：

import React, { useState, useEffect } from 'react';

export default function SideMenu(props) {
  const [products2, setProducts2] = useState([]);

  useEffect(() => {
    setProducts2(props.prods);
  }, []);

  return (
    <div>
      {console.log(products2)}
    </div>
  );
}

我正在努力弄清楚为什么我没有在子组件中获取所需的数据。如果你能帮我解决这个问题，我将不胜感激。

P.S.: 我不允许使用class组件，子组件不能更改。

Answer 1

如果子组件存储在父组件中，则不需要 useEffect 和 useState。

import React, { useState, useEffect } from 'react';

export default function SideMenu(props) {
  return (
    <div>
      {console.log(props.prods)}
    </div>
  );
}

Answer 2

子组件在效果挂钩中执行 setProducts2(props.prods);，在它安装后不久，在父组件的 fetch 完成之前。此时，prods 将是父组件中的初始产品：空数组。

这样做的正确方法通常是从子组件中删除状态，而只使用 props - 或，至少，调用 setProducts2 每次 props.prods 变化（使用依赖数组）。但是如果子组件不能改变，那这两个都不可能。

但是，您可以在父组件中，仅在响应返回时有条件地呈现 SideMenu，确保传递给 SideMenu 的初始 props 包含所有必要的数据：

  return (
    <div>
      {products.length && <SideMenu prods={products} />}
    </div>
  );

Answer 3

最好的解决方案是在子组件中使用 useEffect 并在 props 更改时更新它。

import React, { useState, useEffect } from 'react';

export default function SideMenu(props) {
  const [products2, setProducts2] = useState([]);

  useEffect(() => {
    setProducts2(props.prods);
  }, [props.prods]);

  return (
    <div>
      {console.log(products2)}
    </div>
  );
}

从 API 获取数据后立即将数据从父组件传递到子组件时出现问题。（仅功能组件）

Issues when passing data from parent to child component right after fetching data from API. (functional components only)

api

fetch

reactjs

use-effect

use-state

从 API 获取数据后立即将数据从父组件传递到子组件时出现问题。 （仅功能组件）

Issues when passing data from parent to child component right after fetching data from API. (functional components only)

api

fetch

reactjs

use-effect

use-state

从 API 获取数据后立即将数据从父组件传递到子组件时出现问题。（仅功能组件）