ReferenceError：在初始化应用程序、react js 之前无法访问“todos”

Question

在 useEffect 上收到错误“ReferenceError：无法在初始化之前访问“todos””

function App() {
    //use effect
    useEffect(() =>{
        filterHandler();
    },[todos, status]); 


    //input text
    const [inputText,setInputText]=useState('');

    //todo list
    const[todos , setTodos] = useState([]);
    return (
        <div className="App">
            <header>
            <h1>Todo List</h1>
            </header>
            <Form 
                todos={todos} 
            />
        </div>
    )
}

Answer 1

您在组件顶部附近使用待办事项，但直到组件中的较低位置才创建变量。您需要交换顺序，以便先创建它，然后再使用它。

function App() {
  //todo list
  const [todos, setTodos] = useState([]);

  //use effect
  useEffect(() => {
    filterHandler();
  }, [todos, status]);

  //input text
  const [inputText, setInputText] = useState("");

  return (
    <div className="App">
      <header>
        <h1>Todo List</h1>
      </header>
      <Form todos={todos} />
    </div>
  );
}