TypeError: props... 不是 reactjs 中的函数答案

【问题标题】：TypeError: props... is not a function in reactjsTypeError: props... 不是 reactjs 中的函数
【发布时间】：2020-07-14 07:08:12
【问题描述】：

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

【问题讨论】：

setSearch 没有作为 props 传递给组件，实际上由于 useState() 钩子对组件可用。只需致电setSearch(props.type) 即可。还记得传递一个数组，以便仅在更新相关的 prop 或 state 属性时运行效果：reactjs.org/docs/…
是的，我尝试了你的方式，只是编辑了我的代码，但是在我的 axios 中，props.type 是未定义的
您实际上必须将 type 属性传递给 Form 组件并确保它是一个函数。像这样的东西：<Form type={someFunction} /> 刚刚看到下面@yash 的评论解决了同样的问题：D

标签： reactjs

【解决方案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 组件传递任何内容，因此道具为空，您无法调用不存在的函数。

【讨论】：

如何将其传递到表单组件中？
简单:) <Form type={SOMETHING_YOU_WANT_TO_PASS} />