this.props undefined in React native： TypeError： 无法读取 undefined 的属性 'title'

Question

我正在尝试创建一个平面列表的组件，并使用probs将一些信息传递给_renderItem函数中的组件：

class ArticleList extends React.PureComponent {
  _renderItem = ({ item }) => (
    <DummyText title={item.title} />
  );
  render() {
    return (
      <View>
        <FlatList
          data={articles}
          renderItem={this._renderItem}
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}
export default ArticleList;

这是平面列表的组件。

虚拟文本组件非常简单，仅用于试用目的：

class DummyText extends React.Component {
  render() {
    console.log(this.props);
    return (
      <View>
        <Text>{this.props.title}</Text>
      </View>
    );
  }
}
export default DummyText;

但是，当我这样做时，this.probs部分似乎未定义，并且我收到一个错误，说： TypeError: Cannot read property 'title' of undefined

我已经确保该项目具有属性标题，如果_renderItem直接创建<View><Text>{item.title}</Text></View>，它就可以正常工作。

Answer 1

解决方案

修正错别字。

this.probs.title

=>

this.props.title

为什么

通常，undefined消息说没有值。因此，您可以轻松地从title的父值中知道出了什么问题。包括我在内的拼写错误经常发生，通过使用 linter 作为 ESLint 可以防止。

Answer 2

实际上，您并没有将item传递给_renderItem函数

render() {
   return (
     <View>
        <FlatList
           data={articles}
           renderItem={this._renderItem}
           keyExtractor={(item, index) => index.toString()}
        />
     </View>
   );
}

您必须将item传递给_renderItem函数，如下所示：

render() {
   return (
     <View>
        <FlatList
           data={articles}
           renderItem={(item) => this._renderItem(item)}
           keyExtractor={(item, index) => index.toString()}
        />
     </View>
   );
}

然后和你正在使用的一样，

_renderItem = ({ item }) => (
   <DummyText title={item.title} />
);