Javascript 为什么赢了'；我的受控输入组件是否处于更新状态？

在我所在的州，我有一个“editIngreds”数组中的成分列表，例如[苹果”，“香蕉”，“橘子]。它们通过react map函数渲染到DOM。我有一个编辑模式，用输入框替换文本，这样我可以编辑项目并将它们保存回状态数组。但是，在框中键入时，不会发生任何事情。console.log显示，当我键入字符时，editIngreds[i]确实正在更新，但是输入框不会使用此新值更新

 export default function RecipeCard({ recipe, onEditRecipe, onRemoveRecipe }) {
      const ingredients = Object.values(recipe.ingredients);
      const ingredientKeys = Object.keys(recipe.ingredients);

      const [editIngreds, setEditIngreds] = React.useState(ingredients)

      ...

      const onChangeEditIngreds = (event, i) => {
        const value = event.target.value;
        const ingreds = editIngreds
        ingreds[i] = value;
        setEditIngreds(ingreds);
      };

      ...

      return (
        <ul>
          {ingredients.map((ingred, i) => (
            <li key={ingredientKeys[i]}>
              {editMode ? (
                <Input
                  type="text"
                  value={editIngreds[i]}
                  onChange={(e) => onChangeEditIngreds(e,i)}
                />
               ) : (
                 <>{ingred}</>
               )}
             </li>
           ))}
         </ul>

导出默认函数RecipeCard（{recipe，onEditRecipe，onRemoveRecipe}）{
常量成分=对象值（配方成分）；
const ingredientKeys=Object.keys（recipe.components）；
const[editIngreds，setEditIngreds]=React.useState（成分）
...
const onChangeEditIngreds=（事件，i）=>{
常量值=event.target.value；
常数=编辑红色
ingreds[i]=价值；
设置编辑红色（红色）；
};
...
返回(

{components.map（（ingred，i）=>(

{编辑模式(
一旦改变红色（e，i）}
/>
) : (
{ingred}
)}

))}

您正在对

状态进行变异

。在更新之前，对

成分做一个简单的复制

const onChangeEditIngreds = (event, i) => {
    const value = event.target.value;
    const ingreds = [...editIngreds];
    ingreds[i] = value;
    setEditIngreds(ingreds);
  };

而不是使用这个->配料.map（（ingred，i）
使用此->

editIngreds.map((ingred, i){
....

<Input
      type="text"
      value={ingred}
      onChange={(e) => onChangeEditIngreds(e,i)}
 />

editIngreds.map（（ingred，i）{
....
一旦改变红色（e，i）}
/>
Np@Sam，很乐意帮忙。感谢Dupcas的编辑。