React Hooks：有没有一种方法可以根据另一个状态值来计算状态值

Question

我正在寻找一种使用React Hooks计算依赖于其他状态值的状态值的方法。

我已经熟悉React Hooks。到目前为止，我一直在使用useState和useEffect。我知道其他钩子例如useReduce，useCallback等。

我已经制作了一个简单的费率计算器，可以每小时，每周，每月和每年转换费率。当我更改相应的费率时，其他费率也会相应更新。

该应用的代码如下：

import React, { useState } from 'react';
import {
    CssBaseline,
    Container,
    Typography,
    TextField
} from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
    paper: {
        marginTop: theme.spacing(8), // = 4 * 2
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center'
    }
}));

function App() {
    const classes = useStyles();
    const [hourlyRate, setHourlyRate] = useState(10);
    const [workHour, setWorkHour] = useState(40);
    const [weeklyRate, setWeeklyRate] = useState(400);
    const [monthlyRate, setMonthlyRate] = useState(1600);
    const [yearlyRate, setYearlyRate] = useState(19200);

    const tryConvert = ({ name, value }) => {
        if (name === 'work-hours') {
            setWorkHour(value);
            setWeeklyRate(value * hourlyRate);
            setMonthlyRate(value * hourlyRate * 4);
            setYearlyRate(value * hourlyRate * 4 * 12);
        } else if (name === 'hourly-rate') {
            setHourlyRate(value);
            setWeeklyRate(value * workHour);
            setMonthlyRate(value * workHour * 4);
            setYearlyRate(value * workHour * 4 * 12);
        } else if (name === 'weekly-rate') {
            setWeeklyRate(value);
            setHourlyRate(value / workHour);
            setMonthlyRate(value * 4);
            setYearlyRate(value * 4 * 12);
        } else if (name === 'monthly-rate') {
            setMonthlyRate(value);
            setWeeklyRate(value / 4);
            setHourlyRate(value / workHour / 4);
            setYearlyRate(value * 12);
        } else if (name === 'yearly-rate') {
            setYearlyRate(value);
            setMonthlyRate(value / 12);
            setWeeklyRate(value / 12 / 4);
            setHourlyRate(value / 12 / 4 / workHour);
        }
    };

    return (
        <Container component="main" maxWidth="xs">
            <CssBaseline />
            <div className={classes.paper}>
                <Typography component="h1" variant="h5">
                    Rate Kalkulator
                </Typography>
                <TextField
                    variant="outlined"
                    margin="normal"
                    id="hourly-rate"
                    label="Hourly Rate"
                    name="hourly-rate"
                    autoFocus
                    inputProps={{ 'data-testid': 'hourly-rate' }}
                    value={hourlyRate ? hourlyRate : 0}
                    onChange={event => tryConvert(event.target)}
                />
                <TextField
                    variant="outlined"
                    margin="normal"
                    id="work-hours"
                    label="Work Hours"
                    name="work-hours"
                    inputProps={{ 'data-testid': 'work-hours' }}
                    value={workHour}
                    onChange={event => tryConvert(event.target)}
                />
                <TextField
                    variant="outlined"
                    margin="normal"
                    id="weekly-rate"
                    label="Weekly Rate"
                    name="weekly-rate"
                    inputProps={{ 'data-testid': 'weekly-rate' }}
                    value={weeklyRate ? weeklyRate : 0}
                    onChange={event => tryConvert(event.target)}
                />
                <TextField
                    variant="outlined"
                    margin="normal"
                    id="monthly-rate"
                    label="Monthly Rate"
                    name="monthly-rate"
                    inputProps={{ 'data-testid': 'monthly-rate' }}
                    value={monthlyRate ? monthlyRate : 0}
                    onChange={event => tryConvert(event.target)}
                />
                <TextField
                    variant="outlined"
                    margin="normal"
                    id="yearly-rate"
                    label="Yearly Rate"
                    name="yearly-rate"
                    inputProps={{ 'data-testid': 'yearly-rate' }}
                    value={yearlyRate ? yearlyRate : 0}
                    onChange={event => tryConvert(event.target)}
                />
            </div>
        </Container>
    );
}

export default App;

Codesandbox链接-tryConvert

Rate Kalkulator - tryConvert

据我测试，该应用程序按预期运行，尚未在边缘情况下运行。

简化汇率转换

我正在尝试简化与其他React Hooks的转换tryConvert，但没有成功。这是上面代码的转换代码：

    const tryConvert = ({ name, value }) => {
        if (name === 'work-hours') {
            setWorkHour(value);
            setWeeklyRate(value * hourlyRate);
            setMonthlyRate(value * hourlyRate * 4);
            setYearlyRate(value * hourlyRate * 4 * 12);
        } else if (name === 'hourly-rate') {
            setHourlyRate(value);
            setWeeklyRate(value * workHour);
            setMonthlyRate(value * workHour * 4);
            setYearlyRate(value * workHour * 4 * 12);
        } else if (name === 'weekly-rate') {
            setWeeklyRate(value);
            setHourlyRate(value / workHour);
            setMonthlyRate(value * 4);
            setYearlyRate(value * 4 * 12);
        } else if (name === 'monthly-rate') {
            setMonthlyRate(value);
            setWeeklyRate(value / 4);
            setHourlyRate(value / workHour / 4);
            setYearlyRate(value * 12);
        } else if (name === 'yearly-rate') {
            setYearlyRate(value);
            setMonthlyRate(value / 12);
            setWeeklyRate(value / 12 / 4);
            setHourlyRate(value / 12 / 4 / workHour);
        }
    };

我尝试使用useEffect

我尝试过的是在状态更改时使用useEffect添加回调。下面的代码说明了我尝试过的内容：

    import React, { useState, useEffect } from 'react';


    const [hourlyRate, setHourlyRate] = useState(10);
    const [workHour, setWorkHour] = useState(40);
    const [weeklyRate, setWeeklyRate] = useState(400);
    const [monthlyRate, setMonthlyRate] = useState(1600);
    const [yearlyRate, setYearlyRate] = useState(19200);

    useEffect(() => {
        setWeeklyRate(hourlyRate * workHour);
        setMonthlyRate(hourlyRate * workHour * 4);
        setYearlyRate(hourlyRate * workHour * 4 * 12);
    }, [hourlyRate, workHour]);

    useEffect(() => {
        setHourlyRate(weeklyRate / workHour);
        setMonthlyRate(weeklyRate * 4);
        setYearlyRate(weeklyRate * 4 * 12);
    }, [weeklyRate, workHour]);

    useEffect(() => {
        setHourlyRate(monthlyRate / 4 / workHour);
        setWeeklyRate(monthlyRate / 4);
        setYearlyRate(monthlyRate * 12);
    }, [monthlyRate, workHour]);

    useEffect(() => {
        setHourlyRate(yearlyRate / 12 / 4 / workHour);
        setWeeklyRate(yearlyRate / 12 / 4);
        setMonthlyRate(yearlyRate / 12);
    }, [yearlyRate, workHour]);

如果使用这种方法，当我更改workHour时，转换将无法按预期进行。我认为这是因为workHour已依赖于4个不同的useEffect。我仍然不确定。

代码和框链接-useEffect

Rate Kalkulator - useEffect

如果您更改工作时间，则转换将无效

---

当前，我正在尝试使用useReduce的其他方法，但是我仍然不确定这是否是转换费率的最佳方法。

简化我的tryConvert的最佳方法是什么？

在此方面，我将不胜感激。

Answer 1

这里实际上不需要useEffect。 useEffect用于副作用（例如setInterval，document.title，这不是渲染周期的一部分）。

您的第一个解决方案可以很好地工作，但是您可以通过为费率提供唯一的真实来源，并根据该费率计算其他费率来简化此解决方案。像这样：

function App() {
  const classes = useStyles();
  const [hourlyRate, setHourlyRate] = useState(10);
  const [workHour, setWorkHour] = useState(40);

  const convertTo = name => {
    const map = {
      weekly: hourlyRate * workHour,
      monthly: hourlyRate * workHour * 4,
      yearly: hourlyRate * workHour * 52
    };
    return map[name] || 0;
  };

  const convertFrom = name => e => {
    const { value } = e.target;
    const map = {
      weekly: value / workHour,
      monthly: value / workHour / 4,
      yearly: value / workHour / 52
    };
    setHourlyRate(map[name]);
  };

  return (
      <div className={classes.paper}>
        <Typography component="h1" variant="h5">
          Rate Kalkulator
        </Typography>
        <TextField
          label="Hourly Rate"
          value={hourlyRate || 0}
          onChange={e => setHourlyRate(e.target.value)}
        />
        <TextField
          label="Work Hours"
          value={workHour}
          onChange={e => setWorkHour(e.target.value)}
        />
        <TextField
          label="Weekly Rate"
          value={convertTo("weekly") || 0}
          onChange={convertFrom("weekly")}
        />
        <TextField
          label="Monthly Rate"
          value={convertTo("monthly") || 0}
          onChange={convertFrom("monthly")}
        />
        <TextField
          label="Yearly Rate"
          value={convertTo("yearly") || 0}
          onChange={convertFrom("yearly")}
        />
      </div>
  );
}

对于一个有效的示例，这是一个代码框：https://codesandbox.io/s/rate-kalkulator-ej5m8