如何使用 useContext 钩子更新数组?

Question

>我已经使用createContext设置了一个上下文，我希望它更新一个将在不同组件中使用的数组。此数组将接收从 API 获取的数据(通过 Axios(。

这是代码：

上下文.js

import React, { useState } from "react";
const HeroContext = React.createContext({});
const HeroProvider = props => {
const heroInformation = {
heroesContext: [],
feedHeroes: arrayFromAPI => {
setHeroesContext(...arrayFromAPI);
console.log();
}
};
const [heroesContext, setHeroesContext] = useState(heroInformation);
return (
<HeroContext.Provider value={heroesContext}>
{props.children}
</HeroContext.Provider>
);
};
export { HeroContext, HeroProvider };

看到上面我创建了上下文，但什么也没设置？对吗？我也尝试为数组和函数设置相同的名称(分别是heroesContex和feedHeroes(。

组件.js

import React, { useContext, useEffect } from "react";
import { HeroContext } from "../../context/HeroContext";
import defaultSearch from "../../services/api";
const HeroesList = () => {
const context = useContext(HeroContext);
console.log("Just the context", context);
useEffect(() => {
defaultSearch
.get()
.then(response => context.feedHeroes(response.data.data.results))
.then(console.log("Updated heroesContext: ", context.heroesContext));
}, []);
return (
//will return something
)

在组件.js中，我正在导入defaultSearch，即对 API 的调用，用于获取我要推送到数组的数据。

如果立即运行代码，你将看到它将在">仅上下文">中控制台一个寄存器的上下文。我不想...我在这里的目的是获取更多的寄存器。我不知道为什么它只带了一个寄存器。

无论如何，做我上面所做的所有这些事情，它没有填充数组，因此我不能在另一个组件中使用数组数据。

有谁知道如何解决这个问题？我的错误在哪里？

Answer 1

问题是您正在声明一段状态来存储整个上下文对象，但随后您将该状态设置为等于单个解构数组。

所以你正在初始化heroesContext

const heroInformation = {
heroesContext: [],
feedHeroes: arrayFromAPI => {
setHeroesContext(...arrayFromAPI);
console.log();
}
};

但随后用...arrayFromAPI替换它.

此外，您没有正确扩展阵列。 您需要将其分散到一个新数组中，否则它将单独返回值：setHeroesContext([...arrayFromAPI]);

我会做这样的事情：

const HeroContext = React.createContext({});
const HeroProvider = props => {
const [heroes, setHeroes] = useState([]);
const heroContext = {
heroesContext: heroes,
feedHeroes: arrayFromAPI => {
setHeroes([...arrayFromAPI]);
}
};

return (
<HeroContext.Provider value={heroContext}>
{props.children}
</HeroContext.Provider>
);
};
export { HeroContext, HeroProvider };