React.js中添加输入框丢失值及重渲染的原因咨询

嘿，我来帮你捋清楚这个问题！你遇到的输入框值丢失，核心是两个关键问题导致的：

1. 输入框是不受控组件，值未与state绑定 #

你现在的输入框只是渲染出来，但用户输入的内容并没有存在stateIngridients数组里。每次添加新元素触发重渲染时，React会重新创建所有输入框，之前输入的内容自然就被清空了。

2. 列表渲染缺少唯一的key属性 #

React在渲染列表时，依赖key来跟踪每个元素的身份。如果没有key，每次数组变化时，React会销毁旧的输入框并创建全新的，这也会直接导致输入值丢失。

另外，你单独维护的stateCounter其实是冗余的——直接用stateIngridients.length就能获取输入框的数量，少维护一个state还能减少不必要的重渲染触发。

修复后的完整代码 #

import { useState } from 'react';

const IngridientsInputField = () => { 
  // 初始化空数组，每个元素对应一个输入框的当前值
  const [stateIngridients, setStateIngridients] = useState([]);

  function newIngridient(event) { 
    event.preventDefault(); 
    // 基于之前的state添加新的空元素，确保state更新的不可变性
    setStateIngridients(prevState => [...prevState, '']);
  }

  // 处理单个输入框的内容变化，更新对应索引的state值
  const handleInputChange = (index, inputValue) => {
    setStateIngridients(prevState => {
      const updatedIngredients = [...prevState];
      updatedIngredients[index] = inputValue;
      return updatedIngredients;
    });
  }

  return ( 
    <div className="ingridients"> 
      <h3>number of ingridients {stateIngridients.length}</h3> 
      { stateIngridients.map((ingredientValue, index) => ( 
        <input 
          key={index} // 添加唯一key，让React识别每个输入框的身份
          type="text" 
          name="ingridient" 
          title="ingridient" 
          placeholder={`ingridient (example: pineapple)`}
          value={ingredientValue} // 将输入框值与state绑定
          onChange={(e) => handleInputChange(index, e.target.value)} // 监听输入变化并更新state
        /> 
      )) } 
      <button onClick={newIngridient}>add + </button> 
    </div> 
  ) 
};

关键改动说明 #

• 转为受控组件：每个输入框的value与stateIngridients数组中的元素绑定，onChange事件触发时同步更新对应索引的state值，确保输入内容始终被保存。
• 添加唯一key：给列表中的每个输入框加上key={index}（在元素不会重新排序的场景下，索引是简单有效的选择），避免React重渲染时销毁重建输入框。
• 移除冗余状态：用stateIngridients.length直接显示输入框数量，简化状态管理逻辑。

这样修改后，再添加新输入框时，之前输入的内容就不会丢失啦！

内容的提问来源于stack exchange，提问作者JSMITH