Arrays React-useState钩子与上下文Api-can'；t将一个状态数组复制到另一个状态数组

我正在将一个数组导入到“restMovies”中，它工作正常-所有数据都在“restMovies”中，并通过上下文提供程序传递到应用程序的其余部分

但是，我需要对数组进行更改，因此我尝试将“restmoves”数组复制到“movies”数组中，该数组将被转移到应用程序的其余部分

但由于某些原因，我无法“设置电影”，电影数组保持为空

帮忙

export const moviescoxt=createContext（）；
导出常量MoviesContextProvider=（道具）=>
{
const[restMovies，setRestMovies]=useState（[]）；
const[movies，setMovies]=useState（[]）
useffect（（）=>
{
axios.get（“https://api.tvmaze.com/shows）然后（resp=>setrestmoves（resp.data））；
}，[restMovies.values]）
useffect（（）=>
{
restMovies.map（项=>
{
setMovies（[…电影，项目]）
})
}，[movies.values，restMovies.values]）
返回(
{props.children}
)
}

是否需要在电影设置器功能之外创建“restMovies”的副本，然后将其设置为新电影状态？在你的第二次使用效果-钩子 像这样：

问题

movies.values

和

restMovies.values

始终未定义，因此依赖项值永远不会更改，效果回调也永远不会重新触发（从装载时的初始触发开始）。映射数组也用于返回新数组，而不是像推入其他数组等副作用

解决方案 仅使用将

restMovies

数组作为依赖项运行第二个效果（不要导致无限循环），并使用功能状态更新将当前

电影

和

restMovies

状态数组正确传播（复制）到新的数组引用中。我假设您可能也只希望第一个效果在组件挂载时运行一次，以便进行数据提取，因此请删除第一个效果的所有依赖项

useEffect(() => {
    axios.get("https://api.tvmaze.com/shows").then(resp => setRestMovies(resp.data));
}, [])

useEffect(() => {
  setMovies(movies => [...movies, ...restMovies])
}, [restMovies])

---

小心不要更新触发效果运行的相同值 因为每次运行setState函数时都会重新触发

export const MoviesContext = createContext();
export const MoviesContextProvider = (props) => {
  const [restMovies, setRestMovies] = useState([]);
  const [movies, setMovies] = useState([]);

  // This will execute once when the component mounts
  useEffect(() => {
    axios
      .get("https://api.tvmaze.com/shows")
      .then((resp) => setRestMovies(resp.data));
  }, []);

  // This will run when restMovies updates
  useEffect(() => {
    restMovies.map((item) => {
      setMovies([...movies, item]);
    });
  }, [restMovies]);

  return (
    <MoviesContext.Provider value={[movies]}>
      {props.children}
    </MoviesContext.Provider>
  );
};

export const moviescoxt=createContext（）；
导出常量MoviesContextProvider=（道具）=>{
const[restMovies，setRestMovies]=useState（[]）；
const[movies，setMovies]=useState（[]）；
//这将在组件安装时执行一次
useffect（（）=>{
axios
.get（“https://api.tvmaze.com/shows")
。然后（（resp）=>setRestMovies（resp.data））；
}, []);
//这将在restMovies更新时运行
useffect（（）=>{
restMovies.map（（项目）=>{
setMovies（[…movies，item]）；
});
}，[rest电影]；
返回(
{props.children}
);
};

我不明白，为什么要将useffect作为依赖项来收听movies.values？您是否尝试过在第一个useEffect挂钩中分配电影？工作非常出色，我现在更了解依赖关系，谢谢：）

useEffect(() => {
    axios.get("https://api.tvmaze.com/shows").then(resp => setRestMovies(resp.data));
}, [])

useEffect(() => {
  setMovies(movies => [...movies, ...restMovies])
}, [restMovies])

export const MoviesContext = createContext();
export const MoviesContextProvider = (props) => {
  const [restMovies, setRestMovies] = useState([]);
  const [movies, setMovies] = useState([]);

  // This will execute once when the component mounts
  useEffect(() => {
    axios
      .get("https://api.tvmaze.com/shows")
      .then((resp) => setRestMovies(resp.data));
  }, []);

  // This will run when restMovies updates
  useEffect(() => {
    restMovies.map((item) => {
      setMovies([...movies, item]);
    });
  }, [restMovies]);

  return (
    <MoviesContext.Provider value={[movies]}>
      {props.children}
    </MoviesContext.Provider>
  );
};