未定义不是对象(评估"props.item.txt")

Question

所以当我运行我的应用程序时，我收到错误消息，指出

undefine 不是对象(评估 'props.item.txt'(

说它正在ToDoEdit中发生.js 73：22

哪条线

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

待办事项编辑.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

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

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

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

就足够了。如果您不确定props，请将其添加到：

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

Answer 2

你不能使用

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

由于 item 或 txt 可能不存在，因此 || 部分不会运行，因为在此之前会出现错误。你需要这样的东西：

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