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

Question

我在 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 未定义。

Answer 1

能否尝试将子组件中的balance设置为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);

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

How to modify a state variable passed with useContext (not the setState modify, more like a visual edit)

reactjs

web3js

use-context