React에서 정의되지 않은 props 문제

Question

React로 할 일 앱을 작성했습니다. 여러 부품에 대한 구성 요소를 만듭니다. 이제 앱을 실행하려고 할 때마다 표시되지 않습니다.

Uncaught TypeError: todo가 footer.js:15에 정의되어 있지 않다는 오류가 계속 발생합니다.

할 일 목록 애플리케이션을 만들고 모든 할 일 항목을 사용 상태 할 일 항목이 포함된 배열에 넣었습니다. 이는 파일 바닥글에 있는 Todocounter 구성 요소에 전달하는 속성입니다.

prop의 이름을 바꾸고 바닥글에서 위치를 변경하여 올바른 위치에 호출되도록 했습니다.

app.js입니다:

으아악

footer.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;

Answer 1

counttodos函数从组件中移出，这样它就不会在渲染时重新创建。因为你将todos를 함수에 대한 인수로 전달하고 다른 객체에 래핑되지 않으므로 구조 분해 없이 직접 사용할 수 있습니다.

으아악

구성 요소 자체에서 counttodos를 호출하고 이를 상태로 저장하지 않고 직접 계산된 값을 사용합니다(@HenryWoody의 comment 참조):

으아악