时间戳

首页 > 解决方案 > ReactJS 和分页中的 useState 问题

javascript - ReactJS 和分页中的 useState 问题

问题描述

我有一个问题，我无法用useStateReact 解决。我正在尝试对电影和分页进行 API 请求，但我的状态之一是undefined，我真的不明白为什么......我的组件是一个功能组件。

这是我的useState：

const [state, setState] = useState({
    films: [],
    page: 1,
    genres: [],
    currentCategory: ""
  })

这是我的 API 请求：

const getFilms = () => {
    Axios.get(`${baseUrlDiscover}&page=${state.page}&with_genres=${state.currentCategory}`)
      .then(response => {
        setState({
          films: response.data.results
        });
      })
      .catch(error => {
        console.log(error);
        setState({
          films: []
        });
      });
  }

getFilms()挂载组件的调用。

useEffect(() => {
    getFilms()
  }, [])

我用.map这样的方式显示收到的电影：

const theMovies = state.films.map((film, idx) => {
    return <Film film={film} key={idx} />
  });

此时我在第一页上收到 20 部电影，但是当我登录page state控制台获取第二页时，我收到了undefined。我想使用下面的这部分代码来获取 20 部电影的第二页，但没有page state我收到类似的错误state.films.map is undefined

const btnClickNext = (e) => {
    if (state.films && state.page !== 500) {
      setState(
        prevState => ({ page: (prevState.page += 1) }),
        getFilms
      );
    }
    getFilms();
  }

在return我调用btnClickNext函数中：

<Button
  href=""
  target="_blank"
  onClick={() => btnClickNext()}
>
  Next <FaChevronRight />
</Button>

你知道问题可能来自哪里吗？为什么console.log(state.page)给undefined？

非常感谢

标签： javascriptreactjsapiaxiosreact-hooks

解决方案

实际上这不是你应该使用 useState 的方式你应该像这样创建单独的 useState

 const [films, setFilms] = useState([]),
 const [page, setPage] = useState(1),
 const [genres,setGenres] = useState([]),
 const [currentCategory, setCurrentCategory] = useState("")

无论您需要在哪里更新这些状态，您都可以相应地调用相应的设置器。

推荐阅读