为啥不使用上下文 API 在 React JS 中使用此效果?

Posted

技术标签:

【中文标题】为啥不使用上下文 API 在 React JS 中使用此效果?【英文标题】:Why dont works this Effect in React JS with context API?为什么不使用上下文 API 在 React JS 中使用此效果? 【发布时间】:2021-08-06 06:31:25 【问题描述】:

代码

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 下的所有组件都会自动更新,不是吗?

【问题讨论】:

【参考方案1】:

这是因为您在组件的本地状态中使用coins。 您可以直接使用上下文值而不是使用useState。 改变

 const [coins, setCoins] = useState(data[exchangeSelected.id].coins)

 const coins = data[exchangeSelected.id].coins;

并完全删除 useEffect

这将在每次上下文更改时自动导致重新渲染。

【讨论】:

以上是关于为啥不使用上下文 API 在 React JS 中使用此效果?的主要内容,如果未能解决你的问题,请参考以下文章