未定義のは、私は私のアプリを実行したときにだから私は</p> <p>未定義は「props.item.txt」を評価対象（ではないというエラーメッセージを取得しています（「props.item.txt」を評価）オブジェクト

Question

ではありません）

は、それがToDoEdit.jsで何が起こっ73:22ラインにある

{props.item.txt || 'New Item'} 

ToDoEdit.js

であると言います

import React, { Component } from 'react'; 
import { 
    View, 
    Text, 
    TouchableHighlight, 
    StyleSheet, 
    Navigator, 
    TouchableOpacity, 
} from 'react-native' 
var styles = require('../styles') 
import InputForm from './InputForm' 
var t = require('tcomb-form-native') 
let Form = t.form.Form 

var ToDo = t.struct({txt: t.Str, complete: t.Bool}); 

var options = { 
    fields: { 
    txt: { 
     label: 'To-Do Item', 
     placeholder: 'enter a to do item here', 
     autoFocus: true 
    } 
    } 
}; 

export default class ToDoEdit extends Component { 
    constructor() { 
    super(); 
    //this.onUpdate = this.onUpdate.bind(this); 
    } 

    render() { 
    return (
     <Navigator 
     renderScene={this.renderScene} 
     navigator={this.props.navigator} 
     navigationBar={ 
      <Navigator.NavigationBar style={{backgroundColor: 'rgba(0, 0, 0, 0.4)'}} 
       routeMapper={NavigationBarRouteMapper(this.props)} /> 
     } /> 
    ) 
    } 

    renderScene=(route, navigator) => { 
    return(
     <InputForm 
     item={this.props.item} 
     id={this.props.id} 
     onUpdate={this.props.onUpdate}/> 
    ); 
    } 
} 

var NavigationBarRouteMapper = props => ({ 
    LeftButton(route, navigator, index, navState) { 
    return (
     <TouchableOpacity style={{flex: 1, justifyContent: 'center'}} 
      onPress={() => navigator.parentNavigator.pop()}> 
     <Text style={styles.back}> 
      {"<"} 
     </Text> 
     </TouchableOpacity> 
    ); 
    }, 
    RightButton(route, navigator, index, navState) { 
    return null; 
    }, 
    Title(route, navigator, index, navState) { 
    return (
     <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}> 
     <Text style={styles.pageTitle}> 
      {props.item.txt || 'New Item'} 
     </Text> 
     </TouchableOpacity> 
    ); 
    } 
}) 

module.exports = ToDoEdit; 

これはどうやって解決できますか？

--------------------------------------固定------- ------------------------------

問題はこのコードセクションではありませんでした。問題はこのタスクを実行するために提供されたindex.android.jsファイル。私たちは古いバージョンのファイルを与えられました。

Answer 1

あなたは

{props.item.txt || 'New Item'} 

項目またはTXTが存在しない場合がありますので、使用することはできませんので、||その前にエラーが発生するため、パートは実行されません。両方itemとtxt任意でよい

{(props.item && props.item.txt) ? props.item.txt : 'New Item'} 

Answer 2

場合（あるいはprops自体）、あなたはそれを防御する必要があります：あなたはこの代わりのようなものが必要になります。

だけitemとtxtの場合は、オプションのものです：

{props.item && props.item.txt || 'New item'} 

で十分です。あなたはpropsについてわからない場合は、それを追加します。その最初の1の

{props && props.item && props.item.txt || 'New item'} 

例：

const Example = props => (
 
    <div>{props.item && props.item.txt || 'New item'}</div> 
 
); 
 

 
ReactDOM.render(
 
    <div> 
 
    <Example /> 
 
    <Example item={{}} /> 
 
    <Example item={{txt: "Item Text"}} /> 
 
    </div>, 
 
    document.getElementById("react") 
 
);

<div id="react"></div> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>