reactjs - 来自子组件的 useContext 挂钩更新
问题描述
我对钩子和 useContext 都很陌生,我正在尝试从子组件更新 onClick 并不断遇到错误“setPokemonId”不是函数,或者..它根本没有做任何事情。
PokedexContext.js
import React, { useState, useEffect } from "react";
import axios from "axios";
const PokedexContext = React.createContext([{}, () => {}]);
const PokedexProvider = (props) => {
const [state, setState] = useState({});
const [loading, setLoading] = useState(true);
let [error, setError] = useState(false);
let [pokemonId, setPokemonId] = useState(10); //807 max
useEffect(() => {
setLoading(true);
setError(false);
axios
.get(`https://pokeapi.co/api/v2/pokemon/${pokemonId}`)
.then((res) => {
setState(res.data, loading);
setLoading(false);
})
.catch((err) => {
setLoading(false);
if (err.response) {
// pokemon not found
setError("Response");
} else if (err.request) {
// api error
setError("Request");
} else {
// everything else
setError(true);
}
});
}, [pokemonId]);
return (
<PokedexContext.Provider
value={[
state,
setState,
error,
loading,
setLoading,
pokemonId,
setPokemonId,
]}
>
{props.children}
</PokedexContext.Provider>
);
};
export { PokedexContext, PokedexProvider };
应用程序.js
import React from "react";
import { PokedexProvider } from "../../context/PokedexContext";
import Pokedex from "../Pokedex";
const Landing = () => {
return (
<PokedexProvider>
<main className="container">
<Pokedex />
</main>
</PokedexProvider>
);
};
export default Landing;
Pokedex.js
import React, { useState, useContext } from "react";
import pokedex from "../assets/pokedex.png";
import PokedexScreen from "./PokedexScreen";
import errorHandling from "../utils/errorHandling";
import { PokedexContext } from "../context/PokedexContext";
import spinner from "../assets/pika-load.gif";
const Pokedex = () => {
const [state, setState, error, loading, setPokemonId, pokemonId] = useContext(
PokedexContext
);
const [power, setPower] = useState(false);
const [shinyDisplay, setShinyDisplay] = useState(false);
console.log(pokemonId);
return (
<div
alt="Pokedex"
data-testid="Pokedex"
className="pokedex"
style={{ backgroundImage: `url(${pokedex})` }}
>
<button className="pokedex--onButton" onClick={() => setPower(!power)}>
{power ? "Off" : "On"}
</button>
{error ? (
<div className="pokedex--screen__error">{errorHandling(error)}</div>
) : power ? (
<>
{loading ? (
<img
className="pokedex--screen__load"
src={spinner}
alt="Loading..."
/>
) : (
""
)}
<button
className="pokedex--shinyButton"
onClick={() => setShinyDisplay(!shinyDisplay)}
>
S
</button>
<span>
<button
className="pokedex--negativeButton"
onClick={() => setPokemonId(pokemonId - 1)}
>
-
</button>
<button
className="pokedex--positiveButton"
// onClick={}
>
+
</button>
</span>
</>
) : (
<div className="pokedex--screen__off" />
)}
</div>
);
};
export default Pokedex;
我的目标是在单击正面或负面按钮时更新 pokemonId,这是当前导致崩溃的原因。
解决方案
问题
当您在 Context Provider 中导出您的值时。它在数组的第 6 个索引中
<PokedexContext.Provider
value={[
state,
setState,
error,
loading,
setLoading,
pokemonId,
setPokemonId, (6)
]}
>
{props.children}
</PokedexContext.Provider>
但是您使用的是Pokedex
.
const [state, setState, error, loading, setPokemonId, pokemonId] = useContext(
PokedexContext
);
解决方案
const [
state,
setState,
error,
loading,
setLoading,
pokemonId,
setPokemonId, (6)
] = useContext(
PokedexContext
);
推荐阅读
- delphi - 扩展存在于外部库中的类的层次结构
- mongodb - 如何删除MongoDB中另一个已删除文档中的文档?
- typeorm - 如何正确配置 Typeorm?
- javascript - 通过 AbortController 中止获取请求后会发生什么?
- javascript - 获取前端js文件中的环境变量
- javascript - 由于 CSS 触摸动作,滑动后无法点击 1 秒
- javascript - 如何在功能组件中同时使用 ComponentWillMount、ComponentWillreceiveprops、ComponentDidMount?
- javascript - 如何在标签栏标签的标签屏幕中显示 React Native 中的长文本
- javascript - 使用javascript按时间对对象数组进行排序
- firebase - 无法让 firebase Service Worker 在移动设备上运行(Vue.js 电容器;Android / iOS)