如何使用钩子复制此设置状态逻辑

Question

我正在将这个 React class 转换为一个函数。其中一个非常常用且重要的部分是确保 this.state(args, callback) 像下面的方法一样工作。

  fetchMore = () => {
    this.setState(
      {
        skip: this.state.skip + 30,
      },
      async () => {
        const { skip, take } = this.state

        const params = {
          skip,
          take,
          order: "start-desc",
          filter: this.applyFilters(),
        }

        this.fetchTournaments(params, false)
      },
    )
  }

我不太熟悉使用 react hooks，这个 hooks 是如何工作的？

Answer 1

您可以参考this working demo和下面的代码片段

export default function App() {
  const [skip, setSkips] = useState(0);
  const [take, setTake] = useState(10);

  useEffect(() => {
    const params = {
      skip,
      take,
      order: "start-desc"
      // filter: applyFilters() // make sure to create a applyFilters fun
    };

    // fetchTournaments(params, false); // make sure to create a fetchTournaments fun
  }, [skip]);
  const fetchMore = () => {
    setSkips(prev => prev + 30);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button onClick={fetchMore}>Fetch More</button>
      {"skip ---- " + skip}
      {"take ---- " + take}
    </div>
  );
}

如何使用钩子复制此设置状态逻辑

How to replicate this set state logic using hooks

reactjs

react-hooks

infinite-scroll