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

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

ただいまの
回答率

89.55%

react native + expo で todoapp を作ってるのですが、新しいtodoを追加する処理で「undefined is not an object」というエラーが出てしまいます

受付中

回答 0

投稿

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

N---------

score 34

行き詰っております。どなたかご教授くださると幸いです。

コード↓

import React, { Component } from 'react';
import {
  Platform,
  StatusBar,
  StyleSheet,
  View,
  Text,
  ScrollView,
  FlatList,
  KeyboardAvoidingView,
} from 'react-native';
import {
  Input,
  Button,
} from'react-native-elements'
import Icon from 'react-native-vector-icons/Feather'

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state= {
      todo: [],
      currentIndex: 0,
      inputText: "",
    }
  }

  onAddItem(){
    let title = this.state.inputText
    if(title == ""){
      return
    }
    let index = this.state.currentIndex + 1
    let newTodo = {title: title, index: index, done: false}
    let todo = [...this.state.todo, newTodo]
    this.setState({
      todo: todo,
      currentIndex: index,
      inputText: "",
    })

  }

  render() {
    return(
      <KeyboardAvoidingView style={styles.container} behavior="padding">

        {/* todo list */}
        <ScrollView style={styles.todolist}>
          <FlatList
            data={this.state.todo}
            renderItem={({item}) => <Text>{item.title}</Text>}
            keyExtractor={(item) => item.index.toString()}
          />
        </ScrollView>

        {/* 新しい todo を追加するところ */}
        <View style={styles.input}>
          {/* text 入力欄 */}
          <Input
            containerStyle={styles.inputText}
            onChange={(text) => this.setState({inputText: text.text})}
            value={this.state.inputText}
          />
          {/* 追加ボタン */}
          <Button
            icon={
              <Icon
                name='plus'
                size={30}
                color='white'
              />
            }
            title=""
            onPress={this.onAddItem}
            buttonStyle={styles.inputButton}
          />
        </View>

      </KeyboardAvoidingView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS == 'ios' ? 20 : StatusBar.currentHeight,
  },

  todolist: {
    flex: 1,
  },
  input: {
    height: 50,
    flexDirection: 'row',
    paddingRight: 10,
  },

  inputText: {
    paddingLeft: 10,
    paddingRight: 10,
    flex: 1,
  },
  inputButton: {
    width: 48,
    height: 48,
    borderWidth: 0,
    borderColor: 'yellowgreen',
    borderRadius: 48,
    backgroundColor: 'green'
  }
})

出てきてしまったエラー↓

undefined is not an object (evaluating 'this.state.inputText')
onAddItem
    C:\Users\nkawa\Documents\Expo\TodoApp\App.js:33:27
touchableHandlePress
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Components\Touchable\TouchableNativeFeedback.android.js:187:45
_performSideEffectsForTransition
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Components\Touchable\Touchable.js:803:34
_receiveSignal
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Components\Touchable\Touchable.js:717:44
touchableHandleResponderRelease
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Components\Touchable\Touchable.js:435:24
invokeGuardedCallbackImpl
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:92:15
invokeGuardedCallback
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:306:36
invokeGuardedCallbackAndCatchFirstError
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:330:30
executeDispatch
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:699:42
executeDispatchesInOrder
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:726:20
executeDispatchesAndRelease
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:884:29
forEachAccumulated
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:863:16
runEventsInBatch
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:1050:6
runExtractedEventsInBatch
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:1075:19
<unknown>
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:2713:6
batchedUpdates$1
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:15311:14
batchedUpdates
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:2616:31
_receiveRootNodeIDEvent
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:2711:17
receiveTouches
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\Renderer\oss\ReactNativeRenderer-dev.js:2787:28
__callFunction
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:349:47
<unknown>
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:106:26
__guard
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:297:10
callFunctionReturnFlushedQueue
    C:\Users\nkawa\Documents\Expo\TodoApp\node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:105:17
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

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

  • ただいまの回答率 89.55%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • React Nativeに関する質問
  • react native + expo で todoapp を作ってるのですが、新しいtodoを追加する処理で「undefined is not an object」というエラーが出てしまいます