Question

我已经使用 createContext 设置了一个Context，并且希望它更新将在不同组件中使用的数组。此数组将接收从API提取的数据（通过Axios）。

代码如下：

Context.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 ）。

Component.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
)

在 Component.js 中，我要导入 defaultSearch ，这是对API的调用，该API提取了要推送到数组的数据。 / p>

如果您现在运行代码，您会发现它将在 Just context 中控制一个寄存器的上下文。我不想要它……我的意图是要获取更多的寄存器。 我不知道为什么只带一个寄存器。

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

有人知道如何解决吗？我的错误在哪里？

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 };

如何使用useContext挂钩更新数组？

1 个答案: