为什么我在 React 中的受控输入组件不会更新为 state？

Question

I've got a list of ingredients in an "editIngreds" array in my state, eg ['Apple', 'Banana', 'Orange']. They are rendered to the DOM via react map function. I have an edit mode that replaces the text with Input boxes so I can edit the items and save them back to the state array. However, when typing in the box, nothing happens. console.log shows that editIngreds[i] is indeed being updated when I type a character, however the input boxes do not update with this new value.

 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>

Answer 1

You are mutating the state . Make a shallow copy of ingredients before updating

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

Answer 2

Rather than using this -> ingredients.map((ingred, i) use this ->

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

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