Javascript Undefined不是对象（评估'；props.item.txt'；）

因此，当我运行我的应用程序时，我会收到一条错误消息，上面写着

undefine不是对象（正在计算'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;

import React，{Component}来自'React'；
进口{
看法
文本，
触控高光，
样式表，
领航员，
可触摸不透明度，
}从“反应本机”
var styles=require（“../styles”）
从“./InputForm”导入InputForm
var t=require（'tcomb-form-native'）
设Form=t.Form.Form
var ToDo=t.struct（{txt:t.Str，complete:t.Bool}）；
变量选项={
字段：{
txt:{
标签：“待办事项”，
占位符：“在此处输入待办事项”，
自动对焦：正确
}
}
};
导出默认类ToDoEdit扩展组件{
构造函数（）{
超级（）；
//this.onUpdate=this.onUpdate.bind（this）；
}
render（）{
返回(
)
}
renderScene=（路线、导航器）=>{
返回(
);
}
}
var NavigationBarRouteMapper=props=>({
LeftButton（路线、导航器、索引、导航状态）{
返回(
navigator.parentNavigator.pop（）}>
{“您不能使用

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

由于项或txt可能不存在，因此| |部分将不会运行，因为在此之前会出现错误。您需要类似以下内容：

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

如果
item
和
txt
都是可选的（甚至
props
本身），您需要对此进行防御

如果只有
项
和
txt
是可选项：

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

已足够。如果您不确定
道具
，请将其添加到：

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

第一个例子：


const-Example=props=>(
{props.item&&props.item.txt | |'新项目'}
);
ReactDOM.render(
,
document.getElementById（“react”）
)；

很明显，
props
或
props.item
是
未定义的
。所以你需要看看原因。使用浏览器内置的调试器。我会看看这个，但我也找到了文件中没有的修复方法。我更正了帖子，解释了发生的事情。