ReactJS：为什么有些组件更新而其他组件不更新？答案

【问题标题】：ReactJS: Why some components update and other ones dont?ReactJS：为什么有些组件更新而其他组件不更新？
【发布时间】：2021-05-21 00:23:15
【问题描述】：

我是新手，我正在学习钩子。我已经看到 useState 不会立即更新，您必须为此使用 useEffect 。这就是我正在做的事情，这就是我的问题所在：我的应用程序是一个货币转换器，它允许修改任何输入字段，因此，另一个字段将自动更新，并且工作正常。但是当我更改任何货币时，汇率会更新，但输入字段不会更新。我发誓我已经查看了很多文档，但我不明白为什么会发生这种情况。非常感谢

import img1 from "./img/money.png"
import axios from "./services/httpService"
import {useState, useEffect} from "react"
import config from "./config"
import SelectCurrency from "./components/selectCurrency";

export default function App() {

    const [currencies, setCurrencies] = useState({c1: 'USD', c2: 'USD'})
    const [amount, setAmount] = useState({c1: 1, c2: 1})
    const [currenciesList, setCurrenciesList] = useState([])
    const [rate, setRate] = useState(1)

    useEffect(async () => {
        const rateFetched = await axios.get(config.urlAPI + currencies.c1)
        const response = rateFetched.data
        setRate((response.conversion_rates[currencies.c2]).toFixed(2))
        setCurrenciesList(response.conversion_rates)
        console.log(rate)
    },[currencies.c1,currencies.c2])


    useEffect(() => {
        setAmount(
            {
                c1: amount.c1,
                c2: amount.c1*rate
            }
        )
        console.log(rate)
    }, [currencies.c1])

    useEffect(() => {
        console.log(rate)
        setAmount(
            {
                c1: amount.c2 / rate,
                c2: amount.c2
            }
        )
        console.log('a')
    }, [currencies.c2])


    const handleC1 = (event) => {
        setAmount(
            {
                c1: +event.target.value,
                c2: +(event.target.value * rate).toFixed(2)
            })
        console.log('a')
    }

    const handleC2 = (event) => {
        setAmount(
            {
                c1: +(event.target.value / rate).toFixed(2),
                c2: +event.target.value
            }
        )
        console.log('a')
    }

    const updateCurrency1 = (event) => {
        setCurrencies(
            {
                c1: event.target.value,
                c2: currencies.c2,
            })
        console.log('a')
    }

    const updateCurrency2 = (event) => {
        setCurrencies(
            {
                c1: currencies.c1,
                c2: event.target.value
            })
        console.log('a')
    }

    const swap = () => {
        setCurrencies(
            {
                c1: currencies.c2,
                c2: currencies.c1,
            })
        setAmount(
            {
                c1: (+amount.c2).toFixed(2),
                c2: (+amount.c1).toFixed(2)
            })
        setRate((1 / rate).toFixed(2), console.log(rate))
        console.log('a')
    }


    return (
        <body>
        <img src={img1} id="" className="money-img"/>
        <h1>Exchange Rate Calculator</h1>
        <p>Choose the currency and the amounts to get the exchange rate</p>
        <div className="container">
            {<SelectCurrency updateAmount={handleC1}
                             updateCurrency={updateCurrency1}
                             currency={currencies.c1}
                             amount={amount.c1}
                             currenciesList={currenciesList}
            />}
            <div className="swap-rate-container">
                <button className="btn" id="rate-btn" onClick={swap}>
                    Swap
                </button>
                <div className="rate" id="rate">{`1 ${currencies.c1} = ${rate} ${currencies.c2}`}</div>
            </div>
            {<SelectCurrency updateAmount={handleC2}
                             updateCurrency={updateCurrency2}
                             currency={currencies.c2}
                             amount={amount.c2}
                             currenciesList={currenciesList}
            />}
        </div>
        </body>
    )
}

这里是 SelectCurrency 组件，它使用 options 和 input

呈现 select >

import React from 'react';

function SelectCurrency(props) {
    const {updateAmount, updateCurrency, currency, amount, currenciesList} = props

    return (
        <div className="currency">
            <select id="currency-one"
                    onChange={updateCurrency}
            >
                {Object.keys(currenciesList).map((c) =>
                    <option value={c}
                            selected={c === currency}
                    >
                        {c}
                    </option>)}
            </select>
            <i className="fa fa-caret-down fa-2x"></i>
            <input type="number"
                   id="amount-one"
                   defaultValue={1}
                   step={0.01}
                   value={amount}
                   onInput={updateAmount}
            />
        </div>
    );
}

export default SelectCurrency;

【问题讨论】：

不要在useEffect中直接使用async，如果不使用异步函数也是没必要的（不带await）。
感谢您的建议，我删除了它，但这不是问题:(

标签： javascript reactjs react-hooks use-effect use-state

【解决方案1】：

我怀疑您没有向输入字段添加 value 属性。给输入字段对应状态的value属性。

【讨论】：

我在 SelectCurrency 中添加了代码，以显示我是如何管理输入值的。还是谢谢