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

我得到的错误是HomeRoute中的'TypeError：无法读取未定义的属性'data'。我认为错误在于以下行：data={this.state.data}。
我在正确定义data吗？我什至可以正确设置FlatList吗？还是与我传递应用程序状态有关？

如果您需要在问题后附加任何其他代码，只需在注释中提问即可。
预先感谢

Answer 1

您已声明in状态为父组件，导致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本身中，您需要从其道具中提取数据。

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

Answer 2

MyAppsName类中未定义包括HomeRoute在内的几个函数。因此，这些功能中的this没有指向正确的this。我建议将它们放在类中，并绑定所有使用this的函数。

由于语法定义不正确，您会收到语法错误。遵循render的定义模式，例如：

makeRemoteRequest() {

代替

makeRemoteRequest = () => {

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

2 个答案: