React组件值传递异常：文本未同步至可拖拽方块问题求助

问题概述 #

基于React+react-dnd构建的可拖拽方块网格应用，颜色修改功能正常，修改后拖拽也能保留颜色；但文本修改仅在TextInput内显示，无法同步到方块本身，且逻辑看似与颜色修改一致，找不到问题差异。

核心问题分析 #

1. 方块未渲染文本内容 #

原代码中DraggableSquare的方块容器内没有添加文本渲染逻辑，即使父组件状态更新了文本值，方块上也无法显示。

2. 参数传递顺序错误 #

moveSquare函数定义参数为(fromIndex, toIndex, newText, newColor)，颜色修改时调用moveSquare(index, index, newText, newColor)符合顺序；但文本修改点击编辑图标时，调用的是moveSquare(index, newText, color, undefined)，将newText错误传递给了toIndex参数，导致状态更新逻辑错误。

3. 文本状态未同步到父组件 #

文本修改仅维护了组件本地的newText状态，未及时同步到父组件的grid状态，只有在关闭输入框时才尝试同步，且因参数错误导致同步失败；同时本地状态未监听父组件text props的变化，拖拽后会出现状态脱节。

解决步骤 #

1. 添加方块文本渲染 #

在grey-square容器内添加文本渲染逻辑，确保文本值能显示在方块上：

<div className="grey-square" ref={drag} style={/* ... */}>
  {/* 添加文本渲染 */}
  {!isTextInputOpen && <div style={{ fontSize: "24px", marginTop: "20px" }}>{text}</div>}
  {/* 其余图标、输入框等内容 */}
</div>

2. 修正参数传递顺序 #

修改编辑图标的点击事件，保持moveSquare参数顺序与颜色修改一致：

<img
  src={edit}
  onClick={() => {
    setIsTextInputOpen(!isTextInputOpen);
    if (!isTextInputOpen) {
      // 正确参数：fromIndex, toIndex, newText, newColor
      moveSquare(index, index, newText, color);
    }
  }}
  {/* ... 样式 */}
  alt="edit icon"
/>

3. 同步文本状态到父组件 #

方案一：实时同步（输入时立即更新）

移除本地newText状态，直接使用props的text作为输入框值，onChange时实时调用moveSquare更新父组件状态：

// 移除本地状态：const [newText, setNewText] = useState(text);

{isTextInputOpen && (
  <TextInput
    id="newtext"
    labelText=""  
    value={text}
    onChange={(e) => {
      moveSquare(index, index, e.target.value, color);
    }}
    style={{ marginTop: "20px" }}
  />
)}

方案二：临时本地状态（关闭输入框时同步）

保留本地newText状态，添加useEffect同步父组件text props的变化，避免拖拽后状态脱节：

const [newText, setNewText] = useState(text);
useEffect(() => {
  setNewText(text);
}, [text]);

{isTextInputOpen && (
  <TextInput
    id="newtext"
    labelText=""  
    value={newText}
    onChange={(e) => setNewText(e.target.value)}
    style={{ marginTop: "20px" }}
  />
)}

修改后的关键代码示例 #

const DraggableSquare = ({ index, text, color, moveSquare }) => {
  const [{ isDragging }, drag] = useDrag({
    type: "square",
    item: { index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging()
    })
  });

  const [isHovered, setIsHovered] = useState(false);
  const [, drop2] = useDrop({
    accept: "square",
    drop: (item, monitor) => {
      const didDrop = monitor.didDrop();
      if (!didDrop) {
        moveSquare(item.index, index);
      }
    },
    hover: (item, monitor) => {
      setIsHovered(monitor.isOver());
    },
    collect: (monitor) => {
      setIsHovered(monitor.isOver());
    }
  });

  const [isPaletteOpen, setIsPaletteOpen] = useState(false);
  const [isTextInputOpen, setIsTextInputOpen] = useState(false);
  const [newText, setNewText] = useState(text);

  // 同步父组件text变化到本地状态
  useEffect(() => {
    setNewText(text);
  }, [text]);

  const opacity = isDragging ? 0.5 : 1;

  return (
    <div className="square-div" ref={drop2}>
      <div
        className="grey-square"
        ref={drag}
        style={{
          opacity,
          backgroundColor: color,
          width: "200px",
          height: "200px",
          textAlign: "center",
          paddingTop: "30px",
          position: "relative",
          border: isHovered ? "3px solid blue" : "none",
          borderRadius: "5px",
        }}
        onMouseOver={() => setIsHovered(true)}
        onMouseLeave={() => setIsHovered(false)}
      >
        {/* 渲染方块文本 */}
        {!isTextInputOpen && <div style={{ fontSize: "24px", marginTop: "20px" }}>{text}</div>}
        
        <img
          src={edit}
          onClick={() => {
            setIsTextInputOpen(!isTextInputOpen);
            if (!isTextInputOpen) {
              // 修正参数顺序
              moveSquare(index, index, newText, color);
            }
          }}
          style={{
            width: "15px",
            height: "15px",
            position: "absolute",
            right: "5px",
            top: "5px"
          }}
          alt="edit icon"
        />

        {isTextInputOpen && (
          <TextInput
            id="newtext"
            labelText=""  
            value={newText}
            onChange={(e) => setNewText(e.target.value)}
            style={{ marginTop: "20px" }}
          />
        )}
        <img
          src={palette}
          onClick={() => setIsPaletteOpen(!isPaletteOpen)}
          style={{
            width: "15px",
            height: "15px",
            position: "absolute",
            right: "25px",
            top: "5px"
          }}
          alt="palette icon"
        />

        {isPaletteOpen && (
          <ColorPicker2
            className="palette"
            currentColor={color}
            updateColor={(newColor) =>
              moveSquare(index, index, newText, newColor)
            }
          />
        )}
      </div>
    </div>
  );
};

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