[英]State not updating when using useContext
我正在学习如何使用上下文。 我有一个按钮点击更新我的 state 但是当我尝试在另一个组件上使用上下文时它似乎没有更新 state。我可以在我的卡组件上看到 state 更新。 当我在我的上下文中对测试进行控制台记录时,它没有显示传递给它的任何 state。 我将卡片组件中的 state 传递到 cardContext 中,以便我可以在其他地方使用
卡组件设置 state
import { useState, useEffect } from 'react';
import { Button } from 'react-bootstrap';
import './Card.css';
function Card() {
const API_KEY = '';
const BASE_URL = ``;
const [coins, setCoins] = useState([]);
const [tests, setTests] = useState('');
// console.log(coinsSelected);
console.log(tests);
const getPrice = async () => {
const updatedPrice = await axios.get(BASE_URL);
setCoins(updatedPrice.data);
};
useEffect(() => {
getPrice();
}, []);
return (
<div className="card-container">
{coins.map((coin) => (
<div className="card" key={coin.id}>
<div className="flip-card">
<div className="flip-card-inner">
<div className="flip-card-front">
{coin.logo_url === '' ? (
<h1>No Image</h1>
) : (
<img src={coin.logo_url} alt="coin"></img>
)}
<div className="flip-card-price">
<h3>{coin.name}</h3>
<p>{coin.price}</p>
</div>
</div>
<div className="flip-card-back">
<h3>ATH -{coin.high}</h3>
</div>
</div>
</div>
<div className="card__button">
<Button
variant="primary"
onClick={(e) => setTests(e.currentTarget.value)}
value={coin.id}
>
Buy
</Button>
</div>
</div>
))}
</div>
);
}
export default Card;
卡片上下文
export const CardContext = createContext();
export const CardProvider = (props) => {
const [coinsSelected, setCoinsSelected] = useState([]);
const [tests, setTests] = useState('');
return (
<CardContext.Provider value={[tests, setTests]}>
{props.children}
</CardContext.Provider>
);
};
尝试在这里使用 Context
import { CardContext } from '../../Context/CardContext';
function Swap() {
const [tests, setTests] = useContext(CardContext);
console.log('foo', tests);
return (
<div>
<h1>{tests}</h1>
</div>
);
}
export default Swap;
样本数据
"id": "BNB",
"currency": "BNB",
"symbol": "BNB",
"name": "Binance Coin",
"logo_url": "https://s3.us-east-2.amazonaws.com/nomics-api/static/images/currencies/bnb.svg",
"status": "active",
"platform_currency": "BNB",
"price": "362.89854083",
"price_date": "2022-02-25T00:00:00Z",
"price_timestamp": "2022-02-25T05:49:00Z",
"circulating_supply": "168137036",
"max_supply": "168137036",
"market_cap": "61016684987"
}```
为了让Card
组件访问CardContext
值,它必须呈现在CardProvider
创建的子树中。 然后它可以解构和访问tests
和setTests
上下文值。
例子:
const CardContext = createContext(["", () => {}]);
const CardProvider = (props) => {
const [coinsSelected, setCoinsSelected] = useState([]);
const [tests, setTests] = useState("");
return (
<CardContext.Provider value={[tests, setTests]}>
{props.children}
</CardContext.Provider>
);
};
...
function App() {
return (
<div className="App">
<CardProvider>
<Card />
</CardProvider>
</div>
);
}
...
function Card() {
const API_KEY = "";
const BASE_URL = ``;
const [coins, setCoins] = useState([]);
const [tests, setTests] = useContext(CardContext); // <-- access context value
console.log(tests);
const getPrice = async () => {
const updatedPrice = await axios.get(BASE_URL);
setCoins(updatedPrice.data);
};
useEffect(() => {
getPrice();
}, []);
return (
<div className="card-container">
{coins.map((coin) => (
<div className="card" key={coin.id}>
<div className="flip-card">
<div className="flip-card-inner">
<div className="flip-card-front">
{coin.logo_url === "" ? (
<h1>No Image</h1>
) : (
<img src={coin.logo_url} alt="coin" height={100} />
)}
<div className="flip-card-price">
<h3>{coin.name}</h3>
<p>{coin.price}</p>
</div>
</div>
<div className="flip-card-back">
<h3>ATH -{coin.high}</h3>
</div>
</div>
</div>
<div className="card__button">
<Button
variant="primary"
onClick={(e) => setTests(coin.id)}
>
Buy
</Button>
</div>
</div>
))}
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.