设置新State后React组件未重渲染，拖拽文本到textarea无更新

核心问题 #

你的组件触发drop事件后，textarea内容未更新的根本原因是受控textarea的值绑定方式错误：

• React中，受控<textarea>必须通过value属性绑定状态变量，而非将状态作为标签的子节点内容。
• 标签内的子节点内容仅作为非受控模式下的defaultValue生效，初始渲染后不会随状态变化自动更新。

修复后的代码 #

修改textarea的属性，将状态areaValue绑定到value属性即可解决问题：

import React from "react"
import PropTypes from "prop-types"
import { useDrop } from 'react-dnd'
import { useState } from "react";

const CodeArea = (props) => {
  const [areaValue, setAreaValue] = useState("default");

  function addText(item) {
    console.log("drop!")
    console.log(item.text)
    setAreaValue(item.text);        
  }

  const [ , drop] = useDrop(() => ({
    accept: "block",
    drop: (item) => addText(item)
  }))

  return (
    <React.Fragment>
      <textarea
        ref={drop}
        id="myTextArea"
        name="myTextArea"
        rows="25"
        cols="50"
        value={areaValue} {/* 改为value属性绑定状态 */}
      />
    </React.Fragment>
  )
}

CodeArea.propTypes = {
};

export default CodeArea

补充优化（可选） #

如果需要支持用户手动编辑textarea内容，还需添加onChange事件同步状态：

<textarea
  ref={drop}
  id="myTextArea"
  name="myTextArea"
  rows="25"
  cols="50"
  value={areaValue}
  onChange={(e) => setAreaValue(e.target.value)} {/* 监听输入更新状态 */}
/>

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