在没有 useEffect 的情况下渲染后更改值时是否有修改值的方法

Question

我有一个 React 应用程序可以获取渲染时需要的数据。当数据到达时，我有一个 useEffect 来格式化数据并更新所需的变量。

我现在的问题是，我们正在使用的格式函数已更改为一个钩子，我不能再在 useEffect 中使用它了，我想知道是否有一种方法可以基本上复制该过程而无需useEffect

举个简单的例子，原来我有类似这个组件的东西：

const MyComponent = ({myValue}) => {
    const [outputVal, setOutputVal] = useState(0);

    useEffect(() => {
        if (myValue != null) setOutputVal(formatCurrency(myValue));
    }, [myValue]);

[...]

formatCurrency 是一个使用 Intl.NumberFormat 功能的简单函数，它只会根据需要转换值。我现在换成使用 react-i18next 库，它具有我想要的其他功能，但它使用挂钩，这意味着我无法使用 useEffect.

中的函数

我尝试将其更改为在页面加载时使用该功能，即：

const [outputVal, setOutputVal] = useState(formatCurrency(myValue));

我发现的问题是 myValue 的初始值为 null，并且当 myValue 更新时函数不会重新运行。

任何帮助或信息都将非常有用。

Answer 1

因为 formatCurrency 可能只是将数值格式化为字符串，所以您可以在每次渲染时运行它，并将其视为您在渲染期间使用的任何普通变量，即：

const MyComponent = ({myValue}) => {
    const outputVal = formatCurrency(myValue);
    return <p>{outputVal}</p>
};

在没有 useEffect 的情况下渲染后更改值时是否有修改值的方法

Is there a way to modify a value when its changed after rendering without useEffect

reactjs

react-i18next

react-hooks