TypeError: props… is not a function in reactjs

Question

我正在嘗試使用 react 項目從星球大戰網站獲取數據 API，這是我的代碼：

const Form = (props) => {
  const [search, setSearch] = useState("people");
  const [searchID, setSearchID] = useState(1);

  const [responseData, setResponseData] = useState({});

  useEffect(() => {
    buttonAPI();
    setSearch(props.type);
  }, [props.type]);

  const buttonAPI = () => {
    axios
      .get(`https://swapi.dev/api/${props.type}/`)
      .then((res) => {
        setResponseData(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    navigate(`/${search}/${searchID}`);
  };

  return (
    <div className="container" style={pageStyle}>
      <form onSubmit={onSubmit}>
  .
  .
  .

)

嘗試添加props.setSearch(props.type);時出現此錯誤進入useEffect

這是我的 github 這個項目：

https://github.com/nathannewyen/reactjs-practice/tree/master/luke-api

Answer 1

從您的 App.jsx：

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Info from "./components/Info";
import Form from "./components/Form";

function App() {
  return (
    <div className="App">
      <Form />
      <Info />
    </div>
  );
}

export default App;

您沒有向Form組件傳遞任何內容，因此 props 是空的，您不能調用不存在的 function。