react-native - TypeError：无法读取未定义的“数据”属性

Question

我正在使用<FlatList/>为 json 的每个对象呈现一个项目。此 json 存储在this.state.json. 这是我的代码：

export class MyAppsName extends React.Component {
  static navigationOptions = {
    title: "App name",
    headerLeft: null,
  };
  constructor() {
    super();
    this.state = {
      index: 0,
      isAuthed: false,
      data: [
        {
          name: "Class 1",
          grade: 83,
          letterGrade: "A+"
        },
        {
          name: "Class 2",
          grade: 90,
          letterGrade: "B+"
        }
      ],
      loading: false
    };
  }

  refresh() {

    this.setState({ isAuthed: true });
  }

  componentWillMount() {

  }

  render() {
    return (
      <Root>
        <ScrollableTabView initialPage={0} tabBarPosition="top">
          <HomeRoute tabLabel="Grades" />

          <View
            style={{ flex: 1, justifyContent: "center" }}
            tabLabel="Settings"
          >

          </View>
        </ScrollableTabView>
      </Root>
    );
  }
}
makeRemoteRequest = () => {

  //do request stuff
};

handleRefresh = () => {
  this.makeRemoteRequest();
};

renderSeparator = () => {
  return (
    <View
      style={{
        height: 1,
        width: "86%",
        backgroundColor: "black",
      }}
    />
  );
};

renderHeader = () => {
  return <View />;
};
classSelected = className => {
//do stuff
};

renderFooter = () => {
  if (!this.state.loading) return null;

  return (
    <View>
      <ActivityIndicator animating size="large" />
    </View>
  );
};
const HomeRoute = () => (

  <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
    <FlatList
      style={{ width: width }}
      data={this.state.data}
      renderItem={({ item }) => (
        <View style={{ left: "9%", padding: 6 }}>
          <TouchableOpacity onPress={() => this.classSelected(item.name)}>
            <Text
              style={{
                fontSize: 16
              }}
            >
              {item.name}
            </Text>
            <Text
              style={{
                fontSize: 12
              }}
            >
              {item.grade}
            </Text>
            <Text
              style={{
                fontSize: 12
              }}
            >
              {item.letterGrade}
            </Text>
          </TouchableOpacity>
        </View>
      )}
      ItemSeparatorComponent={this.renderSeparator}
      ListHeaderComponent={this.renderHeader}
      ListFooterComponent={this.renderFooter}
      keyExtractor={item => item.name}
    />
  </List>
);

我得到的错误是'TypeError：无法读取 HomeRoute 中未定义的属性'数据'。我认为错误在这一行：data={this.state.data}.
我定义data正确吗？我是否正确设置了 FlatList？还是与我传递应用程序状态的方式有关？

如果您需要将任何其他代码附加到问题中，您可以在评论中询问。
提前致谢

标签： react-native

Answer 1

您已将状态声明为父组件，导致 this.state 在其子组件中未定义。

使用 HomeRoute 组件时，需要从其父组件传递状态数据。

render() {
    return (
      <Root>
        <ScrollableTabView initialPage={0} tabBarPosition="top">
          <HomeRoute tabLabel="Grades" data={this.state.data} />

          <View
            style={{ flex: 1, justifyContent: "center" }}
            tabLabel="Settings"
          >

          </View>
        </ScrollableTabView>
      </Root>
    );
  }

在 HomeRoute 本身中，您需要从它的 props 中提取数据。

const HomeRoute = ({data}) => (

  <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
    <FlatList
      style={{ width: width }}
      data={data}
      renderItem={({ item }) => (
        <View style={{ left: "9%", padding: 6 }}>
          <TouchableOpacity onPress={() => this.classSelected(item.name)}>
            <Text
              style={{
                fontSize: 16
              }}
            >
              {item.name}
            </Text>
            <Text
              style={{
                fontSize: 12
              }}
            >
              {item.grade}
            </Text>
            <Text
              style={{
                fontSize: 12
              }}
            >
              {item.letterGrade}
            </Text>
          </TouchableOpacity>
        </View>
      )}
      ItemSeparatorComponent={this.renderSeparator}
      ListHeaderComponent={this.renderHeader}
      ListFooterComponent={this.renderFooter}
      keyExtractor={item => item.name}
    />
  </List>
);