React父传子函数后无法完整访问父组件state的问题排查

问题原因 #

你碰到的是React里典型的闭包陷阱：每次点击“Add input”时，传递给新创建Input组件的onDeleteRow函数，捕获的是当时渲染周期里的inputList状态值，而非最新的状态。当后续点击删除按钮时，调用的是对应Input创建时刻的onDeleteRow，所以打印的是创建该输入框时的inputList长度，不是当前最新的长度。

另外，直接把React元素存在state里的做法也不规范——React的state应该存储数据而非UI元素，这样既便于维护，也能避免不必要的渲染问题。

修复方案 #

1. 用数据而非UI元素存储输入项状态
2. 借助useCallback包裹删除函数，确保能获取最新state；或者在更新状态时使用函数式更新来获取最新state值

以下是修复后的代码：

import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";

const Input = ({ deleteRow, id }) => {
  const handleDelete = () => deleteRow(id);
  return (
    <>
      <input placeholder="Your input here" />
      <button onClick={handleDelete}>Delete</button>
    </>
  );
};

const Form = () => {
  // 用数组存储输入项的唯一标识，而非UI元素
  const [inputIds, setInputIds] = useState([]);

  // 用useCallback包裹，确保函数引用稳定，且能获取最新state
  const onDeleteRow = useCallback((id) => {
    // 函数式更新，基于最新状态修改
    setInputIds(prevIds => prevIds.filter(itemId => itemId !== id));
    // 打印最新的输入项数量
    console.log("当前输入项数量", inputIds.length);
  }, [inputIds]);

  const onAddBtnClick = () => {
    // 生成唯一ID，避免用索引当key的问题
    const newId = Date.now();
    setInputIds(prevIds => [...prevIds, newId]);
  };

  return (
    <div>
      <button onClick={onAddBtnClick}>Add input</button>
      {inputIds.map(id => (
        <Input
          key={id}
          id={id}
          deleteRow={onDeleteRow}
        />
      ))}
    </div>
  );
};

ReactDOM.render(<Form />, document.getElementById("form"));

关键改进点 #

• 存储数据而非UI元素：state只存输入项的唯一ID，渲染时通过map生成UI组件，这是React的最佳实践
• 用唯一ID作为key：避免用索引当key，防止组件复用导致的状态混乱
• useCallback + 函数式更新：解决闭包陷阱，确保删除函数能获取到最新的state值
• 函数式更新state：在setInputIds中用prevIds => ...的形式，保证每次更新都基于最新状态

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