Reactjs 需要先填写依赖输入字段，以便其他人工作

解决这个问题的办法可能是只存储输入的状态.不要先计算总数.

const [gramsEaten, setGramsEaten] = useState(0);
const [kcal, setKcal] = useState(0);
const [carbs, setCarbs] = useState(0);
const [fats, setFats] = useState(0);
const [protein, setProtein] = useState(0);

let handleGramsEatenChange = (e) => {
    setGramsEaten(e.target.value);
}

let handleKcalChange = (e) => {
    setKcal(e.target.value);
}

let handleCarbsChange = (e) => {
    setCarbs(e.target.value);
}

let handleFatsChange = (e) => {
    setFats(e.target.value);
}

let handleProteinChange = (e) => {
    setProtein(e.target.value)
}

然后，在视图中，您可以在那里进行计算.当用户输入一个字符串或一些无效的非数字时，值可能会显示NaN，因此您可以对输入进行验证.在该视图中，如果还没有输入计算所需的构成值，则还可以使用条件条件来隐藏该值，如"kcal==unfined&；&；gram sEten！==unfined&；&；Math.ceil((kcal*gram sEten)/100)"所示.

<input type="number" min="0" onChange={handleKcalChange}/>
<input type="number" min="0" onChange={handleCarbsChange}/>
<input type="number" min="0" onChange={handleFatsChange}/>
<input type="number" min="0" onChange={handleProteinChange}/>

<label>How many grams have you consumed?</label>
<input type="number" min="0" onChange={handleGramsEatenChange}/>

<table>
    <tbody>
    <tr>
        <th>Total calories</th>
        <td>{kcal == undefined && gramsEaten !== undefined && Math.ceil((kcal*gramsEaten)/100)}</td>
    </tr>
    <tr>
        <th>Total carbohydrates</th>
        <td>{Math.ceil(carbs*gramsEaten)/100}</td>
    </tr>
    <tr>
        <th>Total fats</th>
        <td>{Math.ceil(fats*gramsEaten/100)}</td>
    </tr>
    <tr>
        <th>Total protein</th>
        <td>{Math.ceil(protein*gramsEaten)/100}</td>
    </tr>
    </tbody>
</table>

建议您将所有相关状态存储在一个对象中，而不是单独的useState.

const [macronutrientState, setMacronutrientState] = useState({fats: undefined, carbs: undefined, gramsEaten: undefined, kcal: undefined})

const handleMacronutrientStateChange = (e) => {
    setMacronutrientState((prevMacronutrientState) => 
        ({...prevMacronutrientState, 
             [e.target.name]: e.target.value
         }
        )
    )
}

<input type="number" min="0" name="kcal" onChange={handleMacronutrientChange}/>
<input type="number" min="0" name="carbs" onChange={handleMacronutrientChange}/>
<input type="number" min="0" name="fats" onChange={handleMacronutrientChange}/>
<input type="number" min="0" name="protein" onChange={handleMacronutrientChange}/>

<label>How many grams have you consumed?</label>
<input type="number" min="0" name="gramsEaten" onChange={handleMacronutrientChange}/>

<table>
    <tbody>
    <tr>
        <th>Total calories</th>
        <td>{Math.ceil((macronutrientState.kcal*macronutrientState.gramsEaten)/100))}</td>
    </tr>
    <tr>
        <th>Total carbohydrates</th>
        <td>{Math.ceil((macronutrientState.carbs*macronutrientState.gramsEaten)/100))}</td>
    </tr>
    <tr>
        <th>Total fats</th>
        <td>{Math.ceil((macronutrientState.fats*macronutrientState.gramsEaten)/100))}</td>
    </tr>
    <tr>
        <th>Total protein</th>
        <td>{Math.ceil((macronutrientState.protein*macronutrientState.gramsEaten)/100))}</td>
    </tr>
    </tbody>
</table>

这是一个很好的实践，因为它可以帮助您组织状态，并重用相同的函数handleMacronutrientStateChange，该函数根据输入中给出的名称设置状态.