Question

因此，当我运行我的应用程序时，我收到错误消息

undefine不是对象（评估＆＃39; props.item.txt＆＃39;）

说它发生在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

如果item 和 txt都可以是可选的（甚至props本身），则需要对此进行辩护。

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

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

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

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

第一个例子：

＆＃13;

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")
);

＆＃13;

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

＆＃13;

Answer 2

你不能使用

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

由于item或txt可能不存在，所以||部分将无法运行，因为之前会有错误。你需要这样的东西：

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

未定义不是对象（评估＆＃39; props.item.txt＆＃39;）

2 个答案: