reactjs - 为什么不使用上下文 API 在 React JS 中使用此效果?
问题描述
代码
const GroupCoins = () => {
const {state} = useContext(Context)
const {data, exchangeSelected} = state
const [coins, setCoins] = useState(data[exchangeSelected.id].coins)
useEffect(() => {
setCoins(data[exchangeSelected.id].coins)
}, [exchangeSelected])
return (
<div className="overflow-y-auto h-9/12 rounded my-3 flex flex-col justify-items-start w-11/12 bg-gray-900 bg-opacity-10 border-gray-400 border">
<div className="w-full text-center flex flex-row py-2 text-gray-500 font-semibold text-lg">
<div className="w-1/6">Coin</div>
<div className="w-4/6">Rate</div>
<div className="w-1/6">Current Price</div>
</div>
{coins.map(coin => (<Coin key={coin.id} coin={coin}></Coin>))}
</div>
)
}
我有这个效果来检测变量 exchangeSelected 是否正在改变,我在其他组件中更改这个变量,上下文下的所有其他组件都在刷新但不是这个,我认为上下文 api 下的所有组件都会自动更新,不是吗?
解决方案
发生这种情况是因为您coins
在组件的本地状态下使用。您可以直接使用上下文值而不是使用useState
. 改变
const [coins, setCoins] = useState(data[exchangeSelected.id].coins)
至
const coins = data[exchangeSelected.id].coins;
并完全删除useEffect
。
每次您的上下文更改时,这将自动导致重新渲染。
推荐阅读
- kubernetes - Minikube: bash: /usr/local/bin/minikube: 没有这样的文件或目录
- material-ui - 材质 UI 网格对齐
- jquery - 带有客户端模板的字段的 Kendo Grid 过滤器
- java - Java 中的 Oracle 函数
- vba - 将工作表名称输出到 ACCESS VBA 中的表中
- node.js - 如何永远为 Node 中的日志文件提供相对路径
- google-colaboratory - 我可以和其他人一起使用 Google colabs 吗?
- java - Java试图动态设置Frame resizable(false)
- php - file_exists():open_basedir 限制生效。文件(/usr/bin/ffprobe)不在允许的路径中
- typescript - 如何使用 ngFor 选择第一个选项?