Problème avec les accessoires non définis dans React

Question

J'ai écrit une application de tâches dans React. Je crée des composants pour plusieurs pièces. Désormais, chaque fois que j'essaie de lancer l'application, elle ne s'affiche pas.

Je reçois toujours l'erreur Uncaught TypeError : todo is undefined in footer.js:15.

J'ai créé une application de liste de tâches et mis toutes les tâches à faire dans un tableau avec les tâches à faire en état d'utilisation. C'est la propriété que je transmets dans le composant Todocounter en pied de page du fichier.

J'ai essayé de renommer l'accessoire et de changer sa position dans le pied de page pour qu'il soit appelé au bon endroit.

Voici 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;

Voici 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

Passez counttodos函数从组件中移出，这样它就不会在渲染时重新创建。因为你将todos comme argument à la fonction, et il n'est pas enveloppé dans un autre objet, vous pouvez donc l'utiliser directement sans le déstructurer :

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

Appelez counttodos dans le composant lui-même et utilisez directement la valeur calculée sans la stocker comme état (voir le commentaire de @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>
  );
}