React Textarea无法实时修改内容

问题

  const [datum, setDatum] = useState<File | WebSite | any>()

  const setInputValue = (value: string) => {
        datum.content = value
    setDatum(datum)
  }

        ...

      <AutoHeightTextarea
        placeholder={t('datasetCreation.stepOne.webParser.input.url') as string}
        value={datum?.content}
        onChange={e => setInputValue(e.target.value)}
        minHeight={58}
        maxHeight={600}
        className={`${cn(s.textArea)} overflow !py-2 resize-none block w-full !px-3 bg-gray-50 border border-gray-200 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-gray-700 tracking-[0.2px]`}
      />

根据代码，useState hook 的 datum 变量是一个对象，而在 setInputValue 函数中，直接修改了该对象的属性并将其传递给了父组件进行更新。这样做不会触发 React 的状态更新机制，因为 React 并不知道当前对象已经被修改。

解决方法

  const setInputValue = (value: string) => {
    setDatum((prevState: any) => ({...prevState, content:value}))
  }

在这个新的 setInputValue 实现中，我们首先使用 setDatum 函数来更新 datum 状态变量。我们使用了函数形式的参数，以确保我们能够获取到最新的 datum 值。

然后，我们创建了一个新的对象，基于之前的 datum 对象，但是将内容 content 更新为传入的参数 value。最后，我们通过调用 setDatum 将更新的 datum 对象传递给父组件进行更新。

这样做应该可以让 datum 对象更新并正确地显示在组件中。