如何使用钩子复制此集合状态逻辑

Question

我正在将这个 React 类转换为函数。其中一个非常常用和重要的部分是确保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)
},
)
}

我对使用反应钩子不是很熟悉，这将如何工作钩子？

Answer 1

您可以参考此工作演示和下面的代码片段

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>
);
}