Question

我在子组件中从父组件调用了一个函数 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 (
      ...
   )
}

Answer 1

在调用 setTodos 中的 child component 时，您的代码中存在拼写错误

在 child 中应该是 setTodos 而不是 setToDos。你有资本D，应该很小d。

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

setTodos([//here your code]);

Answer 2

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

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

Answer 3

您将 setTodos 作为 prop 传递到您的子组件中。因此，您可能正在调用 setToDos 而不是 setTodos。

反应类型错误：“x”不是函数

3 个答案: