React Tab组件中文本框失焦，仅能单次输入单个字符求助

问题原因 #

1. 列表元素未添加唯一key，导致React每次渲染都重新创建textarea组件，触发焦点丢失。
2. 直接修改原状态对象（违反React状态不可变原则），导致状态更新异常，引发不必要的组件重渲染。

修改后的代码 #

JSX部分 #

<TabPanel value={value} index={0}>
  {[...Array(commentCount)].map((item, index) => {
    return (
      <React.Fragment key={index}>
        <div className="col-12 d-flex comments-content">
          <div className="mb-0 flex-10">
            <textarea 
              name="" 
              id="" 
              rows="4" 
              className="w-100 p-2 mb-3" 
              data-testid={`commentTextArea_${index}`}
              value={commentArea.find(x => x.id === index)?.value || ""}
              onChange={(e) => setComment(e, index)}
            />
          </div>
        </div>
      </React.Fragment>
    );
  })}
</TabPanel>

JS逻辑部分 #

const [commentArea, setCommentArea] = useState([{ value: "", id: 0 }]);

const setComment = (e, index) => {
  setCommentArea(prevCommentArea => {
    const hasItem = prevCommentArea.some(x => x.id === index);
    if (hasItem) {
      // 生成新数组，替换对应项的value
      return prevCommentArea.map(item => 
        item.id === index ? { ...item, value: e.target.value } : item
      );
    } else {
      // 添加新项到数组
      return [...prevCommentArea, { value: e.target.value, id: index }];
    }
  });
};

修改说明 #

• 添加key={index}：React通过key识别列表元素，确保组件复用，避免重新创建textarea导致焦点丢失。
• 不可变状态更新：使用函数式更新，基于前一次状态创建新的数组和对象，符合React状态管理规范，保证状态更新能被正确检测，避免异常渲染。

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