2

我想知道如何使异步 setState 同步工作。我正在做一个分页。但我想每次按上一个和下一个按钮时导入 5 个帖子。但是，但它总是只有在我首先按两次按钮时才有效。

这是我的代码。<Forum.js> - 组件

export default function Forum() {
const [page, setPage] = useState(1);
const [list, setList] = useState([]);

const getData = async () => {
  try {
    const res = await axios.get(` ${FORUM_MOCK_API}?_page=1&_limit=5`);
    console.log(res.data[1].id);
    setList(res.data);
  } catch (error) {
    alert(error);
  }
};

const nextPost = async (e) => {
  const { name } = e.target;
  try {
    if (name === 'prevBtn' && page === 1) return;
    if (name === 'prevBtn') {
      const res = await axios.get(
        `${FORUM_MOCK_API}?_page=${page - 1}&_limit=5`,
      );
      setList(res.data);
      setPage(page - 1);
    } else if (name === 'nextBtn') {
      const res = await axios.get(`${FORUM_MOCK_API}?_page=${page}&_limit=5`);
      setList(res.data);
      setPage(page + 1);
    }
  } catch (error) {
    alert(error);
  }
};

useEffect(() => {
  getData();
  setPage(page + 1);
  setPage(page - 1);
}, []);

return (
  <ForumCon>
    <PostWrap>
      {list.map((post) => {
        return (
          <Post
            key={post.id}
            title={post.title}
            tag={post.tag.name}
            time={time}
            content={post.content}
            onClick={(e) => goToDetail(post.id)}
          />
        );
      })}
      <div className="pageBtns">
        <SmallButton
          text="prev"
          onClick={(e) => nextPost(e)}
          name="prevBtn"
        />
        <SmallButton
          text="next"
          onClick={(e) => nextPost(e)}
          name="nextBtn"
        />
      </div>
    </PostWrap>
  </ForumCon>
);

}

<SmallButton.js> -- 组件

export default function SmallButton({ text, onClick, name }) {
return (
  <SmallButtonCon onClick={onClick} name={name}>
    {text}
  </SmallButtonCon>
);

}

4

0 回答 0