React状态抛出TypeError: setEnd is not a function错误，求原因？

1. Props拼写或大小写错误 #

检查两处关键拼写：

• 根组件传递props时，确认是不是准确写了<FirstStep ... setEnd={setDone} />，有没有把setEnd拼成setend、SetEnd这类错误形式；
• 子组件里调用setEnd时，有没有和传递的props名称完全一致，比如解构props时写成const { setend } = props，大小写不一致会直接导致找不到函数。

2. 子组件未正确接收props #

如果子组件是函数组件，要确保正确获取setEnd：
要么通过解构直接拿到：

function FirstStep({ current, end, setEnd }) {
  // 后续useEffect逻辑
}

要么通过props.setEnd调用，不能直接写setEnd却没从props里获取，否则这个变量会是undefined，调用自然报错。

3. useEffect依赖项配置错误 #

如果useEffect里用到了setEnd、current，一定要把它们加到依赖数组里，否则可能捕获到旧的props值，导致setEnd变为undefined：

useEffect(() => {
  // 你的输入非空判断逻辑
  if (所有输入都非空) {
    setEnd(current);
  } else {
    setEnd(current - 1);
  }
}, [current, setEnd]); // 必须添加依赖

React中useState返回的set函数是稳定的，但添加进依赖数组能避免意外问题。

4. 组件实例未统一传递props #

检查是否有其他地方渲染FirstStep时，没传递setEnd props。比如某处写了<FirstStep current={xxx} />，缺少setEnd的话，子组件里的setEnd就是undefined，调用时必然报错，要确保所有FirstStep实例都传全所需props。

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