React子组件管理父组件对象状态遇map错误及Ref使用咨询

1. 修复remarks.map is not a function错误与新增行问题 #

错误和新增行的根源是你的状态更新逻辑错误：

• 原remarks是包含id和remarksVal的对象数组，但你当前的setChildState每次都会展开旧数组后追加一个仅含remarkVal的新对象，这会导致数组长度持续增加（出现新增行），甚至在初始状态异常时让remarks脱离数组类型，触发map is not a function报错。

正确的更新逻辑应该是定位到对应id的数组项，仅更新它的remarksVal：

const onSliderChangeHandler = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
  const { id, value, name } = e.target;
  setChildState((prevState: any[]) => {
    return prevState.map(item => {
      // 匹配当前输入框的id，更新对应项的内容
      if (item.id === id) {
        return { ...item, [name]: value };
      }
      return item;
    });
  });
};

这样修改后，输入内容只会更新对应id的remarksVal，不会新增数组项，同时保证remarks始终为数组类型，map方法可正常执行。

2. 关于当前Ref的作用 #

你这里的childRef完全没有存在的必要：

• 循环渲染的所有textarea都绑定了同一个childRef，最终ref只会指向最后一个渲染的输入框，无法正确获取所有输入框的引用。
• 你已经通过onChange事件的e.target.value拿到了输入值，不需要借助ref获取内容。
• 如果没有手动聚焦、获取DOM尺寸等特殊需求，直接删除这个ref即可。

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