React多层组件传setState函数报错：setValue/setItem不是函数

以下是针对性的排查和修复步骤，确保select选择能实时同步到父组件：

1. 父组件确认更新函数的传递 #

首先在父组件Creation中，确保正确定义useState并把更新函数传递给中间组件：

// Creation.jsx
import { useState } from 'react';
import CreatorSurface from './CreatorSurface';

function Creation() {
  const [item, setItem] = useState('');
  const [value, setValue] = useState('');

  return (
    <div>
      <p>当前选择：{item} - {value}</p>
      {/* 直接传递setItem和setValue给中间组件 */}
      <CreatorSurface setItem={setItem} setValue={setValue} />
    </div>
  );
}

export default Creation;

2. 中间组件完整透传props #

中间组件CreatorSurface必须把父组件传来的更新函数原样传递给孙组件，不能漏传或拼写错误：

// CreatorSurface.jsx
import CreatorDetails from './CreatorDetails';

// 解构接收父组件的props
function CreatorSurface({ setItem, setValue }) {
  // 中间组件的其他逻辑写在这里
  return (
    <div>
      {/* 把setItem和setValue传递给孙组件 */}
      <CreatorDetails setItem={setItem} setValue={setValue} />
    </div>
  );
}

export default CreatorSurface;

常见坑：渲染孙组件时忘记加setItem={setItem}这类属性，或者把变量名写错（比如写成setItems），导致孙组件拿到的是undefined，调用时自然报错。

3. 孙组件正确调用更新函数 #

在孙组件CreatorDetails中，正确解构props并在select的change事件中调用更新函数：

// CreatorDetails.jsx
function CreatorDetails({ setItem, setValue }) {
  const handleItemChange = (e) => {
    // 直接调用父组件传来的setItem更新状态
    setItem(e.target.value);
  };

  const handleValueChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <div>
      <select onChange={handleItemChange}>
        <option value="">请选择项目</option>
        <option value="项目A">项目A</option>
        <option value="项目B">项目B</option>
      </select>
      <select onChange={handleValueChange}>
        <option value="">请选择值</option>
        <option value="值1">值1</option>
        <option value="值2">值2</option>
      </select>
    </div>
  );
}

export default CreatorDetails;

额外排查项 #

• 检查组件嵌套：确保CreatorSurface是Creation的直接子组件，CreatorDetails是CreatorSurface的直接子组件，多层嵌套时每一层都要透传需要的props。
• 避免命名冲突：如果中间组件自身有同名的state或函数（比如自己也定义了setItem），会覆盖父组件传来的props，要换个名字。
• 不要包装无用函数：不要把setItem包装成() => setItem再传递，直接传原始的setItem即可，包装后可能导致函数引用异常。

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