Problem mit undefinierten Requisiten in React

Question

Ich habe eine To-Do-App in React geschrieben. Ich erstelle Komponenten für mehrere Teile. Jedes Mal, wenn ich versuche, die App auszuführen, wird sie nicht angezeigt.

Ich erhalte ständig die Fehlermeldung Uncaught TypeError: todo is undefiniert in footer.js:15.

Ich habe eine To-Do-Listen-Anwendung erstellt und alle To-Do-Elemente in ein Array mit den Verwendungsstatus-To-Do-Elementen eingefügt. Dies ist die Eigenschaft, die ich der Komponente Todocounter in der Fußzeile der Datei übergebe.

Ich habe versucht, die Requisite umzubenennen und ihre Position in der Fußzeile zu ändern, damit sie an der richtigen Stelle aufgerufen wird.

Das ist app.js:

import React, { useState } from 'react';
import './App.css';
import InputTodos from './input.js';
import ListTodos from './list.js';
import TodoCounter from './footer.js';
import ClearButton from './clearbutton.js';

function App() {
  // create usestates for todos
  const [todo, setTodo] = useState([]);

  // render all components i have in diffrent files
  return (
    <div className="App">
      <div className="container">
        <div className="header">
          <InputTodos todo={todo} setTodo={setTodo} />
        </div>
        <div className="containerMid">
          <ListTodos todo={todo} />
        </div>
        <div className="footer">
          <TodoCounter todo={todo} />
        </div>
        <div className="buttonCleardiv">
          <ClearButton todo={todo} setTodo={setTodo} />
        </div>
      </div>
    </div>
  );
}

export default App;

Das ist footer.js:

import React, { useEffect, useState } from 'react';

import './App.css';

// use effect to show whenever the array will change from completed todos to not completed
function TodoCounter(props) {
  const { todo } = props;
  const [completed, setCompleted] = useState(0);
  const [notCompleted, setNotCompleted] = useState(0);

  // filter between completed todos and not completed todos with cheackking the bolean status
  function counttodos(props) {
    const { todo } = props;
    return {
      completed: todo.filter((todo) => todo.isChecked).length,
      notCompleted: todo.filter((todo) => !todo.isChecked).length,
    };
  }
  //with the useeffect hook set the todos on completed or not completed if sth changes on the todos
  useEffect(() => {
    const { completed, notcompleted } = counttodos(todo);
    setCompleted(completed);
    setNotCompleted(notcompleted);
  }, [todo]);

  return (
    <div>
      <p>Completed: {completed}</p>
      <p>Not Completed: {notCompleted}</p>
      <p>Todos: {todo.length} </p>
    </div>
  );
}

export default TodoCounter;

Answer 1

将counttodos函数从组件中移出，这样它就不会在渲染时重新创建。因为你将todos作为参数传递给该函数，并且它没有被包装在另一个对象中，所以你可以直接使用它而不需要解构：

// 用布尔状态检查已完成和未完成的待办事项进行过滤
function counttodos(todos) {
  return {
    completed: todos.filter(todo => todo.isChecked).length,
    notCompleted: todos.filter(todo => !todo.isChecked).length,
  };
}

在组件本身中调用counttodos，并直接使用计算出的值而不将其存储为状态（参见@HenryWoody的评论）：

function TodoCounter({ todo }) {
  // 使用useEffect钩子在todos发生变化时设置已完成或未完成的todos
  const { completed, notcompleted } = counttodos(todo);
  
  return (
    <div>
      <p>已完成：{completed}</p>
      <p>未完成：{notCompleted}</p>
      <p>待办事项：{todo.length} </p>
    </div>
  );
}