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

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

ただいまの
回答率

88.80%

× Error: A cross-origin error was thrown.というエラーがでてきます。

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 483

hugu-san

score 7

現在、簡単なTodoを作っており、localStorageを導入しようとしているのですが、エラーが出てしまい進まない状況です。ネットでJSON、localStorageの仕様などを見ましたが特に間違っているところが見当たりません。どこが間違えているのか教えてくださると幸いです。

エラーコード

<stateを管理>


import React from 'react';
import './Apptodo.css';
import ToDoListItem from './ToDoListItem';
import ToDoAddItem from './ToDoAddItem';
import ToDoDeleteItem from './ToDoDeleteItem';
import ToDoDoneItem from './ToDoDoneItem';
import ToDoCountItem from './ToDoCountItem';
import ToDoAddButtonItem from './ToDoAddButtonItem';

class AppTodo extends React.Component{

    state = { 
        count:0,                            //完了したTodoをカウント
        todos:[],                             //Todoの内容
        inputTitle:'',                        //入力されているtitle
        inputDescription:'',                  //入力されているdescription
        titlError:'',                         //Error表示用
        descriptionError:'',              
        selectedIndex:null,          //選択されているIndex
        doneCount:0,
        createdAt:new Date(),                                   //0か1で判断                        
        }

    handleTitle = (event) => {       //入力中のtitleをinputtitleにセット
      this.setState({
        inputTitle:event.target.value
      }
      )} 

     handleDiscription = (event) => {         //入力中のdescriptionをinputdescriptionにセット
       this.setState({
         inputDescription:event.target.value
       })
     }

      todoAdd = (e) => {
      e.preventDefault();

      if(!this.state.inputTitle){
        this.setState({
          titleError:'タイトルを入力してください'
        })
        return
      }else if(!this.state.inputDescription){
        this.setState({
          descriptionError:'内容を入力してください'
        })
        return 
      }

      const count = this.state.count + 1;

      const newTodo = {
      count: count,
      title: this.state.inputTitle,
      description: this.state.inputDescription,
      createdAt:new Date(),
      }

      const todo = [ ...this.state.todos, newTodo ];

      this.setState({
        count: newTodo.count,
        todos:todo,
        inputTitle:'',
        inputDescription:'',
        titleError:'',
        descriptionError: '',
      })
       this.todoStore();          //追加するとデータを保存      
       }     

       todoStore = () => {     
        localStorage.setItem(this.state.count,JSON.stringify(this.todos));        //ローカルストレージに保存する関数。
       }

       todoPull = () => {                                                                       //ローカルストレージから取り出す関数
             var List =  localStorage.getItem(this.state.count);
             console.log(List);   
             return(
               JSON.parse(List)
             );
       }

       todoSelect = (index) => {
           this.setState({
              selectedIndex:index,
           })
       }

       todoDelete = (index) => {
           const newTodos = this.state.todos.slice();
           newTodos.splice(index,1);
           this.setState({
             todos:newTodos,
             selectedIndex:null
           })
       }

       todoDone = (index) => {
         console.log(this.props.doneCount);
             const newTodos = this.state.todos.slice();
             newTodos.splice(index,1);
             this.setState({
               todos:newTodos,
               doneCount:this.state.doneCount +1 , 
               selectedIndex:null                         //完了回数をカウントする
             })

       }

       render(){
         return(
          <div className="AppTodoAll">                
              <div className="AppTodoAdd">          
                  <ToDoAddItem  {...this.state} handleTitle={this.handleTitle} handleDiscription={this.handleDiscription} todoAdd={this.todoAdd}
                  alreadyAdder={this.alreadyAdder}/>                    
              </div>
              <div className="AppTodoButton">
                  <ToDoAddButtonItem count={this.state.count} todoAdd={this.todoAdd} />
              </div>
              <br></br>
              <div className="AppTodoList">
                 <ToDoListItem {...this.state} todoSelect={this.todoSelect} alreadyAdded={this.alreadyAdded} todoStore={this.todoStore} todoPull={this.todoPull} />                   
              </div>
              <br></br>
              <div className="AppTodoDone">
                <ToDoDoneItem {...this.state} todoDone={this.todoDone} />             
              </div>
              <div className="AppTodoDelete">
                <ToDoDeleteItem {...this.state} todoDelete={this.todoDelete} />                     
              </div>
              <div className="AppTodoCount">
                <ToDoCountItem {...this.state}/>                      
              </div>
           </div>   
         )
       }
}

export default AppTodo
<TodoList表示>

import React from 'react';          //ただtitleとdescriptionを表示するだけのjsファイル
import './ToDoListItem.css';      

class ToDoListItem extends React.Component{
    render(){
     var todosA = this.props.todoPull();
     console.log(todosA);
     if(todosA === null){
         return null
     }else{
     return(                  
        <div className="ToDoListItem">       
          {todosA.map( (key,index) => {                       
              return(
                    <div className="ToDoListContent" key={index}>
                    <input type="radio" onClick = { () => this.props.todoSelect(index)} /> 
                    <p>{index + 1}</p>
                    <p>{key.title}</p>
                    <p>{key.description}</p>
                    <p>{key.createdAt.toDateString()}</p>
                    </div>
                )    
          })}
          </div>                                                                       
     )
        }

    }
   }


export default ToDoListItem

```

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

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

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

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る