Masalah dengan prop yang tidak ditentukan dalam React

Question

Saya menulis apl tugasan dalam React. Saya mencipta komponen untuk berbilang bahagian. Kini setiap kali saya cuba menjalankan apl ia tidak muncul.

Saya terus mendapat ralat Uncaught TypeError: todo is undefined in footer.js:15.

Saya mencipta aplikasi senarai tugasan dan meletakkan semua item tugasan ke dalam tatasusunan dengan item tugasan status penggunaan. Ini adalah harta yang saya luluskan dalam komponen Todocounter dalam pengaki fail.

Saya cuba menamakan semula prop dan menukar kedudukannya dalam pengaki supaya ia dipanggil di tempat yang betul.

Ini ialah 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;

Ini adalah 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

Lulus counttodos函数从组件中移出，这样它就不会在渲染时重新创建。因为你将todos sebagai hujah kepada fungsi, dan ia tidak dibalut dengan objek lain, jadi anda boleh menggunakannya terus tanpa merosakkan:

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

Panggil counttodos dalam komponen itu sendiri dan gunakan nilai yang dikira secara langsung tanpa menyimpannya sebagai keadaan (lihat @HenryWoody's komen):

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