javascript - 为什么 React 中的受控输入组件不会随状态更新？

Question

我在我所在州的“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>

Answer 1

您正在改变状态。在更新之前制作ingredients的浅拷贝

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