Question

我正在尝试将排序添加到电影应用中，我的代码可以正常工作，但是代码重复太多，我想采用其他方法来保持代码干燥。无论如何，当我进行AJAX调用并使用click事件对其进行更新时，我对应该设置哪种状态感到困惑。

这是一个获取我的应用程序所需数据的模块。

export const moviesData = {
  popular_movies: [],
  top_movies: [],
  theaters_movies: []
};

export const queries = {
  popular:
    "https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=###&page=",
  top_rated:
    "https://api.themoviedb.org/3/movie/top_rated?api_key=###&page=",
  theaters:
    "https://api.themoviedb.org/3/movie/now_playing?api_key=###&page="
};

export const key = "68f7e49d39fd0c0a1dd9bd094d9a8c75";

export function getData(arr, str) {
  for (let i = 1; i < 11; i++) {
    moviesData[arr].push(str + i);
  }
}

有状态组件：

class App extends Component {
  state = { 
   movies = [],
   sortMovies: "popular_movies",
   query: queries.popular,
   sortValue: "Popularity"
  }
}

// Here I am making the http request, documentation says
// this is a good place to load data from an end point
async componentDidMount() {
    const { sortMovies, query } = this.state;
    getData(sortMovies, query);

    const data = await Promise.all(
      moviesData[sortMovies].map(async movie => await axios.get(movie))
    );
    const movies = [].concat.apply([], data.map(movie => movie.data.results));

    this.setState({ movies });
  }

在我的应用程序中，我有一个下拉菜单，您可以在其中按流行度，等级等对电影进行排序。我有一种方法，当我从下拉菜单中选择一个选项时，我会更新一些状态属性：

handleSortValue = value => {
    let { sortMovies, query } = this.state;

    if (value === "Top Rated") {
      sortMovies = "top_movies";
      query = queries.top_rated;
    } else if (value === "Now Playing") {
      sortMovies = "theaters_movies";
      query = queries.theaters;
    } else {
      sortMovies = "popular_movies";
      query = queries.popular;
    }

    this.setState({ sortMovies, query, sortValue: value });
  };

现在，此方法有效，并且它正在更改状态中的属性，但是我的组件没有重新呈现。我仍然看到电影按受欢迎程度排序，因为那是该州的原始设置（sortMovies），没有任何更新。

我知道这是因为我在componentDidMount方法中设置了电影的状态，但是我需要默认情况下初始化数据，所以我不知道如果不在此位置我应该在其他地方做什么方法。

我希望我能清楚自己在这里所做的事情，如果没有请问，我被困在这里，我们将不胜感激。预先感谢。

Answer 1

获取数据的最佳生命周期方法是componentDidMount()。根据{{3}}：

我应该在组件生命周期中的哪个位置进行AJAX调用？

您应该在componentDidMount()生命周期方法中使用AJAX调用填充数据。这样一来，您就可以在检索数据时使用setState()来更新组件。

文档中的示例代码：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
  }

  componentDidMount() {
    fetch("https://api.example.com/items")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <ul>
          {items.map(item => (
            <li key={item.name}>
              {item.name} {item.price}
            </li>
          ))}
        </ul>
      );
    }
  }
}

奖金：setState()中的componentDidMount()被认为是反模式。仅在获取数据/测量DOM节点时使用此模式。进一步阅读：

生命周期挂钩-在哪里设置状态？

1 个答案: