Question

在我所在的州，我有一个“ editIngreds”数组中的成分列表，例如['Apple'，'Banana'，'Orange']。它们通过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

您正在突变state。在更新

之前，先制作ingredients的浅表副本

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

Answer 2

而不是使用它-> Ingredients.map（（ingred，i）使用这个->

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

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

为什么我的React中的受控Input组件不会更新状态？

2 个答案: