質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
参照

参照は、プログラミングにおいて変数や関数といったメモリ空間上での所在を指示するデータのことを指します。その中にはデータ自体は含まれず、他の場所にある情報を間接的に指示するプログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

0回答

700閲覧

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

minaraiegineer

総合スコア1

参照

参照は、プログラミングにおいて変数や関数といったメモリ空間上での所在を指示するデータのことを指します。その中にはデータ自体は含まれず、他の場所にある情報を間接的に指示するプログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

関数

関数(ファンクション・メソッド・サブルーチンとも呼ばれる)は、はプログラムのコードの一部であり、ある特定のタスクを処理するように設計されたものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/07/04 23:37

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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の値を参照できないのですが、この点について教えていただけないでしょうか? 何卒よろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問