React-Native FlatList 产生一个 SyntaxError

Question

我是 React Native 的新手。

我正在尝试刷新组件以在异步存储中加载城市名称，但是当我使用此反应原生 FlatList 时出现错误。我是第一次使用 FlatList。

我遇到了这种类型的错误

SyntaxError: C:\Users\Lenovo\Desktop\App\firstApp\components\HomeScreen.js: Unexpected token, expected ";" (43:16)

  41 |   }
  42 |   render() {
> 43 |     onRefresh() {
     |             
  44 |       this.setState({ isFetching: true }, () => {
  45 |         this.fetchData();
  46 |       });

代码：

import React from "react";
import { Text, Card, Title, FlatList, Paragraph } from "react-native-paper";
import { Alert, View, StyleSheet, ScrollView } from "react-native";
import SyncStorage from "sync-storage";
import { RefreshControl } from "react-native";

export default class HomeScreen extends React.Component {
  state = {
    information: {},
    image: "",
    city: "mumbai",
    isFetching: false,
  };


  fetchData = () => {
    let s_data = "";
    let storage_data = "";
    storage_data = SyncStorage.get("city");
    if (storage_data) {
      s_data = storage_data;
    } else s_data = this.state.city;
    fetch(
      `http://api.openweathermap.org/data/2.5/weather?q=${s_data}&units=metric&APPID=babb9960fabda4237b949996f35fcbed`
    )
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        this.setState({
          information: data,
        });
      });
    this.setState({ isFetching: false });
  };

  onRefresh() {
    this.setState({ isFetching: true }, () => {
      this.fetchData();
    });
  }
  render() {
    return (
      <ScrollView>
        <FlatList
          data={this.state.information}
          onRefresh={() => this.onRefresh()}
          refreshing={this.state.isFetching}
        />
        {this.state.information.weather == undefined ? (
          <Text>Loading....</Text>
        ) : (
          <Card style={{ margin: 12 }}>
            <Card>
              <Card.Content>
                <Title>Current Wether of</Title>
                <Paragraph style={styles.text}>
                  City : {this.state.information.name}
                </Paragraph>
                <Paragraph style={styles.text}>
                  Status : {this.state.information.weather[0].main}
                </Paragraph>
              </Card.Content>
              <Card.Cover
                style={{ margin: 60 }}
                source={{
                  uri: `http://openweathermap.org/img/w/${this.state.information.weather[0].icon}.png`,
                }}
              />
            </Card>
            <Text style={styles.text}>
              Temperature : {this.state.information.main.temp}
            </Text>
            <Text style={styles.text}>
              Discription : {this.state.information.weather[0].description}
            </Text>
          </Card>
        )}
      </ScrollView>
    );
  }
}
const styles = StyleSheet.create({
  text: {
    fontSize: 20,
    marginTop: 20,
  },
  image: {
    height: 100,
  },
});

Answer 1

将 onRefresh 更改为：

onRefresh = () => {
    this.setState({ isFetching: true }, () => {
      this.fetchData();
    });
  }

或保留您的 onRefresh 代码并尝试：

constructor () {
  this.onRefresh = this.onRefresh.bind(this)
}