React Hooks使用時の値の参照について

React Hooksを用いてTodoアプリを作っていますが、関数(handleSubmit)内でuseStateで指定した値(todos, countTodo)を参照できずに困っています。

どうすれば値を参照できるのでしょうか？ご享受お願いいたします。

javascript
1import React, { useState, useCallback, useEffect } from "react";
2import defaultDataset from "./dataset";
3import TodoList from "./components/TodoList";
4import Form from "./components/Form";
5import "./App.css";
6
7const App = () => {
8  const [todos, setTodos] = useState(defaultDataset);
9  const [countTodo, setCountTodo] = useState(todos.length + 1);
10
11  const handleSubmit = useCallback((e) => {
12    e.preventDefault();
13    const title = e.target.title.value;
14    const text = e.target.text.value;
15    // useStateのtodosを参照したい
16    const todos = todos.slice();
17    // useStateのcountTodoを参照したい
18    const countTodo = countTodo;
19    
20
21    // 複製した配列の末尾にフォームの入力内容を追加
22    todos.push({
23      id: countTodo,
24      title: title,
25      text: text
26    })
27    
28    // stateの更新
29    setTodos(todos);
30    setCountTodo(countTodo + 1);
31
32    // 初期化
33    e.target.title.value = '';
34    e.target.desc.value = '';
35  });
36
37  return (
38    <div className="app">
39      <h1>TODOAPP</h1>
40      <Form handleSubmit={() => handleSubmit} />
41      <TodoList todos={todos} />
42    </div>
43  );
44};
45
46export default App;
47
48

hoshi-takanori

2020/07/05 02:37

todos.push のような破壊的変更はせずに、新しい配列を作って setTodos しましょう。

minaraiegineer

2020/07/05 14:08

ご回答ありがとうございます！とりあえず以下の記法で記述しましたのですが、これで良いのでしょうか？ const newTodos = {...todos, id: countTodo, title: title, text: text}; // stateの更新 setTodos(newTodos); また関数内でuseStateの値を参照できないのですが、この点について教えていただけないでしょうか？何卒よろしくお願いいたします。