React TypeError：“x”不是函数答案

【问题标题】：React TypeError: "x" is not a functionReact TypeError：“x”不是函数
【发布时间】：2021-06-18 07:07:00
【问题描述】：

我在子组件中从父级调用了一个函数 setTodos，但这会返回以下错误：

setTodos 不是函数

你能解释一下为什么会这样吗，非常感谢。这是我的代码：

import React, { useState } from 'react';
import './App.css';
import Form from './components/Form';
import TodoList from './components/TodoList';

function App() {
   const [inputText, setInputText] = useState("");
   const [todos, setTodos] = useState([]);
   return (
      <div className="App">
         <header>
            <h1>Phuc's Todo list</h1>
         </header>
         <Form inputText={inputText} todos={todos} setTodos={setTodos}/>
         <TodoList/>
      </div>
   );
}

export default App;

import React from 'react';

const Form = ({inputText, setInputText, todos, setToDos}) => {
   const inputTextHandler = (e) => {
      setInputText(e.target.value);
   }
   const submitTodoHandler = (e) => {
      e.preventDefault();
      setToDos([
         ...todos,
         {text: inputText, completed: false, id: Math.randowm()*1000}
      ])
   }
   return (
      ...
   )
}

【问题讨论】：

嘿，如果你想使用父状态函数，我建议使用它作为包装函数。您可以查看此帖子.. stackoverflow.com/a/29101393/8348558
请在您的问题中发布所有相关代码in。仅截图是不够的。

标签： javascript reactjs

【解决方案1】：

在child component 中调用setTodos 时，您的代码中有错字

在孩子中应该是setTodos 而不是setToDos。你有大写D，应该小d。

由于 Javascript 是区分大小写的语言。所以你必须使用确切的术语。

setTodos([//here your code]);

【讨论】：

谢谢你，就是这样，我应该更加小心错字
谢谢，如果对你有帮助请采纳！

【解决方案2】：

在你的父组件中，setTodos 需要是一个回调，如果你想这样做的话。

在你的父组件中尝试setTodos={(newTodos) => setTodos(newTodos)}。

【讨论】：

【解决方案3】：

您将 setTodos 作为 prop 传递到您的 child 组件中。所以，你可能打电话给setToDos，而不是setTodos。

【讨论】：