首页 > 解决方案 > TypeError: props... 不是 reactjs 中的函数

问题描述

我正在尝试使用 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

标签: reactjs

解决方案


从您的 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内容,因此道具是空的,并且您不能调用不存在的函数。


推荐阅读