如何修改使用 useContext 传递的状态变量（不是 setState 修改，更像是可视化编辑）

Posted 2023-02-18

【中文标题】如何修改使用 useContext 传递的状态变量（不是 setState 修改，更像是可视化编辑）

【英文标题】：How to modify a state variable passed with useContext (not the setState modify, more like a visual edit)

【发布时间】：2021-10-18 14:23:11

【问题描述】：

我在 App.js 中使用 setState，并且我已将它传递给带有 useContext 的子组件。我想在子组件中修改该状态。不像 setState 方式，而是改变它的小数，从它的字符串中创建一个 Identicon 等等。但是 React 给了我内存泄漏警告，我找不到解决方案。

例如

- const [ethBalance, setEthBalance] =  useState(0); 

- <BuyContext.Provider value=ethBalance, tokenBalance, buyToken, web3><BuyComponent /></BuyContext.Provider>

在BuyComponent 我想把余额从wei改成eth；

import React,  useState, useContext  from 'react'
import  BuyContext  from '../App.js'

const  ethBalance, tokenBalance, buyToken, web3  = useContext(BuyContext);

Balance: window.web3.utils.fromWei(ethBalance)

一些相关代码。

虽然我通过了它，但我也无法让它识别web3 函数。它说web3 未定义。

【问题讨论】：

您能否说明您当前是如何尝试编辑子组件中的 useContext 的，这会给您带来内存泄漏错误？

<div>Balance: window.web3.utils.fromWei(ethBalance) </div> 比如这样

【参考方案1】：

你可以尝试将子组件中的余额设置为 useEffect 函数吗？

import React,  useState, useContext, useEffect  from 'react'
import  BuyContext  from '../App.js'

const  ethBalance, tokenBalance, buyToken, web3  = useContext(BuyContext);
const [balance, setBalance] = useState(null);

useEffect(() => 
    if (ethBalance) 
        setBalance(window.web3.utils.fromWei(ethBalance));
    
, [ethBalance]);

console.log(balance);

【讨论】：

感谢您的回答，这看起来很明智。但是我遇到web3 错误，无法尝试。不幸的是，这是我的第二个问题TypeError: Cannot read property 'fromWei' of undefined。它无法识别web3