React: Overwrite an array with another array. Error: Uncaught TypeError: ...is not a function

Question

我目前正在使用 React 开发一个待办事项应用程序。在函数 handleClearTodos 中，我想删除所有状态为：完成的待办事项。为此，我运行遍历此函数中的待办事项数组，并将状态为：打开的所有待办事项写入名为 cleanedTodos 的新数组中。最后，当我想用 cleanedTodos 的内容覆盖 todos 的内容时，我得到以下错误信息：

未捕获类型错误：currentTodos.forEach 不是函数

这是 Todo 组件中的一个函数，它将状态为打开的待办事项与状态为完成的待办事项分开，将它们存储在两个不同的数组中，并在渲染函数中分别渲染它们。

TodoTable.js（父组件）

import React, {useState} from "react";
import { InputBar } from "./InputBar";
import { Todo } from "./Todo";


let currentTodos = [];

export const TodoTable = ({ mockTodos }) => {

    //Konstruktor
    if(mockTodos){
        currentTodos = mockTodos;
    }
   
    
    const [todos, setTodos] = useState(currentTodos);
    const [enterTodo, setEnterTodo] = useState('');


    //Enter Todo handler
    const handleEnterTodo = (event) => {
      setEnterTodo(event.target.value);
    };
  

    //Clear Todo handler
    const handleClearTodos = (event) => {
        let cleanedTodos = []

        todos.forEach((element, index) => {
            if(todos[index].status != 'open'){
                //console.log(todos[index])
                cleanedTodos.push(todos[index]);

 
            }
        });

        setTodos({ todos: cleanedTodos });
        
        console.log(typeof cleanedTodos);
        console.log(todos);
    }
    

    //Create Todo handler
    const handleCreateTodo = (event) => {

        //create new Todo
        const newTodo = {
            id: todos.length,
            describtion: enterTodo,
            status: 'open'
        };

        
        setTodos(todos => 
            [
                newTodo,
                ...todos
        
            ]
        );
    };
  
  

    return(
            <>
                <InputBar 
                    enterTodo={ enterTodo } 
                    handleEnterTodo={ handleEnterTodo } 
                    handleCreateTodo={ handleCreateTodo }
                    handleClearTodos= { handleClearTodos }
                />
                <Todo currentTodos={ todos } />
            </>      
    );
}

Todo.js（子组件）

import React from "react";

export const Todo = ({ currentTodos }) => {
    
    
    let openTodo = [];
    let doneTodo = [];
    // just for develope
    const lineBreak = <hr></hr>
    
    currentTodos.forEach((element, index) => {
        if(currentTodos[index].status == 'open'){
            
            let todoOpen = (
                
                <div className="openTodos" key={ currentTodos[index].id.toString() }>
                    {currentTodos[index].describtion}
                    {/*Buttons*/}
                    {/*Buttons*/}
                </div>
            );
            openTodo = 
            [
                ...openTodo,
                todoOpen
            ]
        }
        else{
            
            let todoDone = (
                
                <div className="doneTodos" key={ currentTodos[index].id.toString() }>
                    {currentTodos[index].describtion}
                    {/*Buttons*/}
                    {/*Buttons*/}
                </div>
            );
            doneTodo = 
            [
                ...doneTodo,
                todoDone
            ]
        }
        
      })
    
    return(
        <>
            {openTodo}
            {lineBreak}
            {doneTodo}
        </>
    );
}

InputBar（子组件）

import React from "react";
import { Button } from "./components/Button";

export const InputBar = ({ enterTodo, handleEnterTodo, handleCreateTodo, handleClearTodos}) => {
  console.log(enterTodo);
    return(
        <>
      <form>
        <input
          type='text'
          value={enterTodo}
          onChange={handleEnterTodo}
        />
        <Button lable= 'ADD'  disabled= { enterTodo == '' } onClick= { handleCreateTodo } />
        <Button lable= 'CLEAR' onClick= { handleClearTodos } />

      </form>
    </>
    );
}

Answer 1

函数forEach可用于类型为Array[=24=的变量]。您的道具 currentTodos 不是数组，您将其设置为对象：

setTodos({ todos: cleanedTodos });

此代码 return 你的待办事项：

console.log(todos.todos) // returning your cleanedTodos array

但是在你的父组件中你将状态初始化为数组，所以它总是应该是数组

React: Overwrite an array with another array. Error: Uncaught TypeError: ...is not a function

React: Overwrite an array with another array. Error: Uncaught TypeError: ...is not a function

reactjs

use-state