Question

我有一个问题，当我进行搜索时，我从API中获得了数据，第一次进行搜索时，一切都很好，所有数据都被显示了。但是，当我立即进行第二次搜索时，没有任何更新。

我放入console.log，发现我正在取回这些数据，但显示未更新。

import React, { Component } from "react";
import { SafeAreaView, StyleSheet } from "react-native";
import Search from "./Component/Search";

export default class App extends Component {
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Search />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

import React from "react";
import { View, TextInput, Button, FlatList, StyleSheet } from "react-native";
import LivreItem from "../Component/LivreItem";

class Search extends React.Component {
  constructor(props) {
    super(props);
    this.inputValue = "";
    this.state = { livres: [] };
  }

  searchBooks = async () => {
    const key = "&key=XXXXXXXXXXXXXXXXXXXXXXX";
    const url = "https://www.googleapis.com/books/v1/volumes?q=" + this.inputValue + key;

    return fetch(url)
      .then(response => response.json())
      .catch(e => {
        console.log("Une erreur s'est produite");
        console.log(e);
      });
  };

  getBooks = () => {
    if (this.inputValue.length > 0) {
      this.searchBooks()
        .then(data => this.setState({ livres: data.items }))
        .catch(reject => console.log(reject));
    }
  };

  changeText = text => {
    this.inputValue = text;
  };

  render() {
    return (
      <View style={styles.header_container}>
        <View style={styles.sub_container}>
          <TextInput
            onChangeText={text => this.changeText(text)}
            style={styles.input}
            placeholder="Ex: Harry Potter"
          />
          <Button
            style={styles.button}
            title="Rechercher"
            onPress={() => this.getBooks()}
          />
        </View>
        <FlatList
          style={styles.list}
          data={this.state.livres}
          keyExtractor={(item, index) => item + index}
          renderItem={({ item }) => <LivreItem livre={item.volumeInfo} />}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  sub_container: {
    justifyContent: "space-between",
    flexDirection: "row",
    marginTop: 30,
    paddingRight: 10,
    paddingLeft: 10
  },
  header_container: {
    flex: 1,
    flexDirection: "column",
    padding: 10
  },
  input: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: "#d6d7da",
    width: 150,
    paddingLeft: 5
  },
  button: {
    borderRadius: 4
  },
  list: {
    paddingLeft: 15,
    paddingRight: 15
  }
});

export default Search;


import React from "react";
import { View, StyleSheet, Image, Text } from "react-native";

class LivreItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = { livre:  this.props.livre};

    this.description =
      this.state.livre.description === null || this.state.livre.description === undefined
        ? "Pas de description disponible"
        : this.state.livre.description;

    this.img = this.state.livre.imageLinks;
    this.image =
      this.img === undefined ||
        this.img.smallThumbnail === undefined ||
        this.img.smallThumbnail === null
        ? null
        : this.state.livre.imageLinks.smallThumbnail;
  }

  render() {
    return (
      <View style={styles.content}>
        <View>
          <Image style={styles.image} source={{ uri: this.image }} />
          <Image style={styles.image} source={this.image} />
        </View>
        <View style={styles.content_container}>
          <Text style={styles.titre}>{this.state.livre.title}</Text>
          <Text style={styles.description} numberOfLines={4}>
            {this.description}
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  content: {
    height: 125,
    flexDirection: "row",
    marginTop: 15
  },
  content_container: {
    flexDirection: "column",
    flexShrink: 1,
    marginLeft: 10
  },
  image: {
    width: 100,
    height: 100
  },
  titre: {
    fontWeight: "bold",
    flexWrap: "wrap"
  },
  description: {
    flexWrap: "wrap"
  }
});

export default LivreItem;

谢谢。

Answer 1

在Flatlist组件ala中配置prop extraData：

<FlatList 
    extraData={this.state.livres}
/>

Answer 2

将布尔值传递给FlatList extraData。

<FlatList 
    extraData={this.state.refresh}
/>

状态更改后结果不会更新

2 个答案: