Question

我正在使用react-native实现无限滚动，当我执行搜索时，将返回结果，并且如果结果在API上有很多页面，则在滚动API时，它将返回更多数据。

我的实现在类组件上运行良好，但是当我尝试将其转换为工作组件时，当我执行搜索时，将返回数据，并且如果我执行了另一次搜索，则仍会显示先前搜索中的先前数据

类组件

class Exemple extends React.Component {
  constructor(props) {
    super(props);
    this.searchedText = "";
    this.page = 0;
    this.totalPages = 0;
    this.state = {
      films: [],
      isLoading: false,
    };
  }

  _loadFilms() {
    if (this.searchedText.length > 0) {
      this.setState({ isLoading: true });
      getFilmsWithSearch(this.searchedText, this.page + 1).then((data) => {
        this.page = data.page;
        this.totalPages = data.total_pages;
        this.setState({
          films: [...this.state.films, ...data.results],
          isLoading: false,
        });
      });
    }
  }
  
  _searchTextInputChanged(text) {
    this.searchedText = text;
  }

  _searchFilms() {
    this.page = 0;
    this.totalPages = 0;
    this.setState(
      {
        films: [],
      },
      () => {
        this._loadFilms();
      }
    );
  }

  _displayLoading() {
    if (this.state.isLoading) {
      return (
        <View style={styles.loading_container}>
          <ActivityIndicator size="large" />
        </View>
      );
    }
  }

  render() {
    return (
      <View style={styles.main_container}>
        <TextInput
          style={styles.textinput}
          placeholder="Titre du film"
          onChangeText={(text) => this._searchTextInputChanged(text)}
          onSubmitEditing={() => this._searchFilms()}
        />
        <Button title="Rechercher" onPress={() => this._searchFilms()} />
        <FlatList
          data={this.state.films}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => <FilmItem film={item} />}
          onEndReachedThreshold={0.5}
          onEndReached={() => {
            if (this.page < this.totalPages) {
              this._loadFilms();
            }
          }}
        />
        {this._displayLoading()}
      </View>
    );
  }
}

功能组件

const Search = () => {
  const [films, setFilms] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [page, setPage] = useState(0);
  const [totalPages, setTotalPages] = useState(0);
  const [searchedText, setSearchedText] = useState("");

  const _loadFilms = () => {
    if (searchedText.length > 0) {
      setIsLoading(true);
      getFilmsWithSearch(searchedText, page + 1).then((data) => {
        setPage(data.page);
        setTotalPages(data.total_pages);
        setFilms([...films, ...data.results]);
        setIsLoading(false);
      });
    }
  };

  useEffect(() => {
    _loadFilms();
  }, []);

  const _searchTextInputChanged = (text) => {
    setSearchedText(text);
  };

  const _searchFilms = () => {
    setPage(0);
    setTotalPages(0);
    setFilms([]);
    _loadFilms();
  };

  const _displayLoading = () => {
    if (isLoading) {
      return (
        <View style={styles.loading_container}>
          <ActivityIndicator size="large" />
        </View>
      );
    }
  };

  return (
    <View style={styles.main_container}>
      <TextInput
        style={styles.textinput}
        placeholder="Titre du film"
        onChangeText={(text) => _searchTextInputChanged(text)}
        onSubmitEditing={() => _searchFilms()}
      />
      <Button title="Rechercher" onPress={() => _searchFilms()} />
      <FlatList
        data={films}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <FilmItem film={item} />}
        onEndReachedThreshold={0.5}
        onEndReached={() => {
          if (page < totalPages) {
            _loadFilms();
          }
        }}
      />
      {_displayLoading()}
    </View>
  );
};

Answer 1

使用功能组件，您无法在getFilmsWithSearch之外运行效果（例如useEffect）。

来自https://reactjs.org/docs/hooks-reference.html#useeffect

在功能组件的主体内（称为React的渲染阶段），不允许进行突变，订阅，计时器，日志记录和其他副作用。这样做会导致UI中的错误和不一致之处。

从_loadFilms事件处理程序内部调用onSubmitEditing={() => _searchFilms()}时，您不在useEffect内部运行，这与从_loadFilms到useEffect的调用不同与组件安装一起运行（由于useEffect的第二个参数是[]，因此在安装时运行一次）。

要解决此问题，通常需要_searchFilms设置一个状态变量（类似于reloadRequested，但不必是布尔值，请参见下面的文章以了解不同的风格）并再来个useEffect，像这样：

  useEffect(() => {
    if (reloadRequested) {
      _loadFilms();
      setReloadRequested(false);
    }
  }
, [reloadRequested])

有关带有更多说明的更完整示例，请尝试本文https://www.robinwieruch.de/react-hooks-fetch-data。

类组件到功能组件的运行不正常

1 个答案: