解决方案

Question

我正在尝试创建一个组件列表，并使用概率将一些信息传递给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;

这是FlatList的组件。

DummyText组件非常简单，仅用于试用目的：

this.probs

但是，当我这样做时，TypeError: Cannot read property 'title' of undefined部分似乎未定义，并且出现错误消息： _renderItem

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

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} />
);

在React Native中未定义this.props：TypeError：无法读取未定义的属性'title'

2 个答案:

解决方案

为什么