javascript - 为什么在 ReactJS 中更新状态时，我的数据在旧数据和新数据之间闪烁？

Question

我正在使用从 Star Wars API 获取数据的 SPA。在项目的字符选项卡中，想法是显示每页的字符，您可以单击下一个或上一个以转到第 2、3 页等。这行得通，但是！每次换页时人物名字都会闪烁，第一次点击后不会出现，但如果继续下去，会越来越多。

我试图通过在再次渲染之前清理状态来修复它，但它不起作用。组件挂载后首先获取数据，然后在单击 btn 时使用 componentwillupdate 函数更新字符组件。

你可以在这里看到组件：https ://github.com/jesusrmz19/Star-Wars-App/blob/master/src/components/Characters.js

还有现场项目，在这里：https ://starwarsspa.netlify.app/#/Characters

标签： javascriptreactjsstate

Answer 1

看看这是否能解决你的问题

class Characters  extends React.Component { 
constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      webPage: "https://swapi.dev/api/people/?page=",
      pageNumber: 1,
      characters: [],
    };
    this.fetchHero = this.fetchHero.bind(this);
  }



async fetchHero(nextOrPrev) {
    //nextOrPrev values-> 0: initial 1: next page -1:prev page
    let pageNum = this.state.pageNumber + nextOrPrev;
    try {
      const response = await fetch(this.state.webPage + pageNum);
      const data = await response.json();
      const characters = data.results;
      this.setState({
        pageNumber: pageNum,
        characters,
        isLoaded: true,
      });
    } catch (error) {
      this.setState({
        pageNumber: pageNum,
        isLoaded: true,
        error,
      });
    }
  }
  componentDidMount() {
    this.fetchHero(0);
  }

  /*you don't need this-> componentDidUpdate(prevState) {
    if (this.state.pageNumber !== prevState.pageNumber) {
      const fetchData = async () => {
        const response = await fetch(
          this.state.webPage + this.state.pageNumber
        );
        const data = await response.json();
        this.setState({ characters: data.results });
      };

      fetchData();
    }
  }*/
  getNextPage = () => {
    if (this.state.pageNumber < 9) {
      this.fetchHero(1);
    }
  };
  getPrevPage = () => {
    if (this.state.pageNumber > 1) {
      this.fetchHero(-1);
    }
  };
  render(
      // the rest of your code
  )
}