javascript - Flatlist 在向其传递另一个数据后不会刷新

Question

我有以下情况:渲染函数中屏幕上有一个 FlatList:

render() {
      console.log('In render');
      const { data } = this.state;
      console.log(data, 'data');
      return (
        <View style={styles.container}>
          <View style={styles.searchContainer}>

            <TextInput
              placeholder="Type something!"
              onChangeText={text => this.setState({ text })}
              value={this.state.text}
            />

            <TouchableOpacity
              onPress={this.onPressSearch}
            >

              <View>

                <Text>Search</Text>

              </View>

            </TouchableOpacity>
          </View>


          <View style={styles.container}>
            {data && data.list
              ? (
                <FlatList
                  data={data.list}
                  renderItem={({ item }) => (
                    <View>
                      <Text style={styles.item}>
                        {item.name}
                        , Temp =
                        {' '}
                        {item.main.temp}
                      </Text>
                      <Text style={styles.item}>{item.weather[0].description}</Text>
                      <Image
                        source={{ uri: `http://openweathermap.org/img/wn/${item.weather[0].icon}@2x.png` }}
                        style={{ width: 100, height: 100 }}
                      />
                    </View>
                  )

                      }
                />
              )
              : null
                }


          </View>
        </View>
      );
    }

首先，我传递给它这样的 JSON 文件:

{
    "message": "accurate",
    "cod": "200",
    "count": 3,
    "list": [
        {
            "id": 2641549,
            "name": "Newtonhill",
            "coord": {
                "lat": 57.0333,
                "lon": -2.15
            },
            "main": {
                "temp": 275.15,
                "pressure": 1010,
                "humidity": 93,
                "temp_min": 275.15,
                "temp_max": 275.15
            },
            "dt": 1521204600,
            "wind": {
                "speed": 9.3,
                "deg": 120,
                "gust": 18
            },
            "sys": {
                "country": ""
            },
            "rain": null,
            "snow": null,
            "clouds": {
                "all": 75
            },
            "weather": [
                {
                    "id": 311,
                    "main": "Drizzle",
                    "description": "rain and drizzle",
                    "icon": "09d"
                }
            ]
        },
        {
            "id": 2636814,
            "name": "Stonehaven",
            "coord": {
                "lat": 56.9637,
                "lon": -2.2118
            },
            "main": {
                "temp": 275.15,
                "pressure": 1010,
                "humidity": 93,
                "temp_min": 275.15,
                "temp_max": 275.15
            },
            "dt": 1521204600,
            "wind": {
                "speed": 9.3,
                "deg": 120,
                "gust": 18
            },
            "sys": {
                "country": ""
            },
            "rain": null,
            "snow": null,
            "clouds": {
                "all": 75
            },
            "weather": [
                {
                    "id": 311,
                    "main": "Drizzle",
                    "description": "rain and drizzle",
                    "icon": "09d"
                }
            ]
        },
        {
            "id": 2640030,
            "name": "Portlethen",
            "coord": {
                "lat": 57.0547,
                "lon": -2.1307
            },
            "main": {
                "temp": 275.15,
                "pressure": 1010,
                "humidity": 93,
                "temp_min": 275.15,
                "temp_max": 275.15
            },
            "dt": 1521204600,
            "wind": {
                "speed": 9.3,
                "deg": 120,
                "gust": 18
            },
            "sys": {
                "country": ""
            },
            "rain": null,
            "snow": null,
            "clouds": {
                "all": 75
            },
            "weather": [
                {
                    "id": 311,
                    "main": "Drizzle",
                    "description": "rain and drizzle",
                    "icon": "09d"
                }
            ]
        }
    ]
}

它渲染正确。比我使用另一个 JSON:

{
    "coord": {
        "lon": 27.56,
        "lat": 53.9
    },
    "weather": [
        {
            "id": 520,
            "main": "Rain",
            "description": "light intensity shower rain",
            "icon": "09d"
        }
    ],
    "base": "stations",
    "main": {
        "temp": 287.15,
        "pressure": 1010,
        "humidity": 82,
        "temp_min": 287.15,
        "temp_max": 287.15
    },
    "visibility": 10000,
    "wind": {
        "speed": 3,
        "deg": 360
    },
    "clouds": {
        "all": 75
    },
    "dt": 1564730938,
    "sys": {
        "type": 1,
        "id": 8939,
        "message": 0.0069,
        "country": "BY",
        "sunrise": 1564712669,
        "sunset": 1564769250
    },
    "timezone": 10800,
    "id": 625144,
    "name": "Minsk",
    "cod": 200
}

我将此对象设置为 data 变量，该变量保持状态。尝试设置新数据后，FlatList 中的所有信息都将被删除，并且不会显示任何内容。我无法理解，这是怎么回事，因为当我在日志中看到渲染函数最终被新数据调用时，为什么什么也没有发生？

UPD

这是我获取和更新数据的方式:

onPressSearch = async () => {
    const cityUrl = `http://api.openweathermap.org/data/2.5/weather?q=${this.state.text}&apikey=8df903ce56f6d18245e72f380beb297d`;
    const fetchData = await fetch(cityUrl).then();
    const data = await fetchData.json();
    this.setState({ data });
    Alert.alert(data.name);
  };

Answer 1

您获取的数据与原始数据的形状完全不同，并且不包含 list 属性。这意味着当您在 onPressSearch 方法中重新分配时，它将使用新形状进行渲染，该形状不包含 list，因此您的 FlatList 将不会被渲染。

这个获取的项目应该添加到状态中原始数据中的现有列表中。您可以执行以下操作:

    onPressSearch = async () => {
       const cityUrl = `http://api.openweathermap.org/data/2.5/weather?q=${this.state.text}&apikey=8df903ce56f6d18245e72f380beb297d`;
       const fetchData = await fetch(cityUrl).then();
       const city = await fetchData.json();
       const { data } = this.state;
       data.list.push(city);
       this.setState({ data });
  };