Question

我有一个组件，可以在其中获取如下存储库：

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

  const loadRepositories = async () => {
    const response = await fetch('https://api.github.com/users/mcand/repos');
    const data = await response.json();
    setUserRepositories(data);
  };
  return (
   <Repository repositories={userRepositories} /> 
  )

子组件仅接收存储库并进行打印。就像这样：

const Repository = ({ repositories }) => {
  console.log('repository rendering');
  console.log(repositories);

  const [repos, setRepos] = useState(repositories);
  useEffect(() => {
    setRepos(repositories);
  }, [  ]);
  const getRepos = () => {
    repos.map((rep, idx) => {
      return <div key={idx}>{rep.name}</div>;
    });
  };
  return (
    <>
      <RepositoryContainer>
        <h2>Repos</h2>
        {getRepos()}
    </>
  );
};

export default Repository;

问题在于，什么都没有显示。在console.log中，我可以看到有存储库，但是该组件似乎无法更新自身，我不知道为什么。也许我在useEffect中缺少了一些东西。

Answer 1

由于您要将存储库中的props数据置于状态，然后基于 state 进行渲染，因此当props更改时，Repository的状态不会更改，因此不会进行更改

存储库数据完全由父元素处理，因此子元素不应使用任何状态-只需使用父元素的prop。您还需要通过return函数来getRepos。

const Repository = ({ repositories }) => {
  const getRepos = () => {
    return repositories.map((rep, idx) => {
      return <div key={idx}>{rep.name}</div>;
    });
  };
  return (
    <>
      <RepositoryContainer>
        <h2>Repos</h2>
        {getRepos()}
    </>
  );
};

export default Repository;

您还可以简化

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

到

useEffect(loadRepositories, []);

这不是还的错误，但可能会引起误解-您的子组件名为Repository，但它呈现了多个存储库。如果您将其命名为Repositories，或者将其命名为.map，则更容易引起混淆（这样，Repository实际上对应于一个存储库数组项对象）。

Answer 2

更改此

 useEffect(() => {
    setRepos(repositories);
  }, [  ]);

到

 useEffect(() => {
    setRepos(repositories);
  }, [repositories]);

子组件未使用功能组件进行更新

2 个答案: