React项目中fetchQuestions is not a function报错排查求助

嘿，我帮你找出问题所在啦！你遇到的fetchQuestions is not a function错误，核心原因是App.js里的组件props传递方式完全错了，导致Home组件根本没接收到这个函数。咱们一步步来修复：

1. 修复App.js中Route的props传递逻辑 #

React Router的Route组件要求element属性接收完整的JSX元素，所有要传递给子组件的props必须直接写在组件标签内部，而不是作为Route的子节点。

修改App.js里的Routes部分：

<Routes>
  <Route 
    path="/" 
    element={
      <Home
        name={name}
        setName={setName}
        fetchQuestions={fetchQuestions}
      />
    }
  />
  <Route 
    path="/quiz" 
    element={
      <Quiz
        name={name}
        questions={questions}
        score={score}
        setScore={setScore}
        setQuestions={setQuestions}
      />
    }
  />
  <Route 
    path="/result" 
    element={<Result name={name} score={score} />}
  />
</Routes>

2. 调整Home组件，复用App的全局状态 #

你在Home组件里自己定义了name和setName状态，但App.js已经维护了这个全局状态，这会导致两个独立的state，Home输入的名字无法同步到Quiz/Result页面。需要移除Home内部的name状态，改用App传递的props：

修改Home组件的核心代码：

// 移除自己的name状态定义，改用props传入的
const Home = ({ name, setName, fetchQuestions }) => {
  const [category, setCategory] = useState("");
  const [difficulty, setDifficulty] = useState("");
  const [error, setError] = useState(false);

  const navigate = useNavigate();

  const handleSubmit = () => {
    if (!category || !difficulty || !name) {
      setError(true);
      return;
    } else {
      setError(false);
      fetchQuestions(category, difficulty);
      navigate("/quiz");
    }
  };

  // 下面的JSX里，把名字输入框改成受控组件
  return (
    <div className="content">
      <div className="settings">
        <span style={{ fontSize: 30 }}>Quiz Settings</span>
        <div className="settings__select">
          {error && <ErrorMessage>Please Fill all the feilds</ErrorMessage>}
          <TextField
            style={{ marginBottom: 25 }}
            label="Enter Your Name"
            variant="outlined"
            value={name} {/* 绑定props的name值 */}
            onChange={(e) => setName(e.target.value)}
          />
          {/* 其余代码保持不变 */}
        </div>
      </div>
      <img src="/gcat.jpg" className="banner" alt="quiz app" />
    </div>
  );
};

错误根源说明 #

你原来的App.js里，Route的写法是把props当成了Route的子节点：

<Route path="/" element={<Home/>}>
    name={name}
    setName={setName}
    fetchQuestions={fetchQuestions}
</Route>

这种写法完全不符合React Router的规则，Route组件不会把这些子节点传递给Home组件，所以Home的props里根本没有fetchQuestions，调用时自然会提示“不是函数”。

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