未定义不是（评估“props.item.txt”）

Question

所以，当我跑我的应用我收到写着

取消定义不是一个对象错误消息（评估“props.item.txt”对象）

说，这是发生在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; 

所以问题是，我该如何解决这个问题？

-------------------------------------- FIXED ------- ------------------------------

所以问题不在于代码段，问题在于提供用于执行此任务的index.android.js文件。我们收到了一个过时的文件版本。

Answer 1

不能使用

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

由于项目或TXT可能不存在，所以||部分将不会运行，因为在此之前会出现错误。你会需要像这个：

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

Answer 2

如果同时item和txt是可选的（甚至props本身），你需要防范这一点。

如果只是item和txt是可选的：

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

就足够了。这第一个

{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>