传递setState函数作为props时报错‘Not a Function’求排查

核心问题：组件名称不匹配 #

你在父组件App里渲染的是<SearchPage />，但实际定义的子组件是SearchBar——这直接导致子组件根本没接收到setInput等props，调用时自然会报setInput is not a function的错误。

修复步骤 #

1. 修正组件引用名称
   把App组件里的<SearchPage />改成<SearchBar />，确保props能正确传递给子组件：

// App组件return部分修改后
return (
  <div className="App">
    <SearchBar input={input} setInput={setInput} handleClick={handleClick} />
  </div>
);

2. 修复数据更新逻辑错误
   在getMovies函数中，你错误地尝试访问resp.data，但resp本身就是接口返回的res.data（数组格式），直接把res.data传给setCurrentData即可：

const getMovies = (input) => {
  axios
    .get(`https://api.tvmaze.com/search/shows?q=${input}`)
    .then((res) => {
      console.log("INPUT22", input);
      console.log(res.data, "hello");
      setCurrentData(res.data); // 无需额外取data属性
    })
    .catch((err) => console.log(err));
};

3. 处理useState的异步特性
   handleClick里调用getMovies后立刻console.log(currentData)拿不到最新值，因为setCurrentData是异步操作。如果需要查看更新后的数据，用useEffect监听currentData变化：

useEffect(() => {
  console.log("MOVIES", currentData);
}, [currentData]);

修复后的完整代码示例 #

import { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [input, setInput] = useState("");
  const [currentData, setCurrentData] = useState([]); // 初始化空数组更合理

  const getMovies = (input) => {
    axios
      .get(`https://api.tvmaze.com/search/shows?q=${input}`)
      .then((res) => {
        console.log("INPUT22", input);
        console.log(res.data, "hello");
        setCurrentData(res.data);
      })
      .catch((err) => console.log(err));
  };

  const handleClick = (e) => {
    e.preventDefault();
    if (input !== "") {
      getMovies(input);
    }
  };

  useEffect(() => {
    console.log("MOVIES", currentData);
  }, [currentData]);

  console.log("INPUT", input);
  return (
    <div className="App">
      <SearchBar input={input} setInput={setInput} handleClick={handleClick} />
    </div>
  );
}

export default App;

const SearchBar = ({ input, setInput, handleClick }) => {
  return (
    <>
      <div className="search__bar">
        <form>
          <input
            type="search"
            placeholder="Search"
            className="search__input"
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />

          <button type="submit" className="submit__btn" onClick={handleClick}>
            Search
          </button>
        </form>
      </div>
    </>
  );
};

export default SearchBar;

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