在上下文提供程序中使用useEffect设置两个Hook状态

Question

我是学习React的新手(没有后端，使用Context API(。在上下文提供程序中，我正在寻找一种从相同数据设置两个Hook状态的方法。进行单个axios调用(无需重新渲染(。提供商接收应用程序。有什么解决方案吗？

export const Context = React.createContext();
const MoviesProvider = ({ children }) => {
console.log("Context Affectations");
const [movies, setMovies] = React.useState(null);
const [selectedMovie, setSelectedMovie] = React.useState(null);
useEffect(() => {
console.log("Context useEffect 1");
const dataGet = externalData;
setMovies(dataGet);
});
useEffect(() => {
console.log("Context useEffect 2");
// SKIPPED PART
const dataGet = externalData;
setSelectedMovie(dataGet[0]);
// SKIPPED PART
});

在相同的useEffect中尝试了这两个，第二个也被跳过。

控制台：

Context Affectations
Context useEffect 1
Pass data
Context useEffect 2
Context Affectations

Answer 1

因此，首先您应该快速阅读useEffect's依赖数组，以及为什么这篇文章非常有用。你想解决的问题只需一次使用就可以实现效果没有问题。

useEffect(() => {
console.log("Context useEffect 2");
// SKIPPED PART
const dataGet = externalData;
setMovies(dataGet);
setSelectedMovie(dataGet[0]);
// SKIPPED PART
}, []); // <- Important part this empty array means that this will run only at the mount of the component (first time appearing) but you could put inside the variable to watch so every time that changes it fetches again

Answer 2

当组件挂载(也就是出现(时，可以让单个useEffect进行axios调用。

useEffect可以为您的两个useState调用两个setter。

另外，在useEffect内部调用setter时，不要忘记添加依赖数组，否则它将无限循环。

在你的情况下，它可能是空的。