通过自定义挂钩功能创建和更新React状态

Question

我在自定义挂钩中有一个异步函数，它应该更新状态，但它没有

export const useXYZ = () => {
const [XYZ, setXYZ] = useState([])
const update = () => {
BackendService.getAllXYZ().then(
({data}) => {
//------------>>> here I want to update, but if I use the hook it doesnt update if I call update()
setXYZ(data)
}
).catch((error)=>{
})
}
return [XYZ, update]
}

Answer 1

下面是一个带有异步状态更新的自定义挂钩的完整示例，以及如何在组件中使用它。

function App() {
const [d1, roll1] = useDice(6)
const [d2, roll2] = useDice(20)
const [d3, roll3] = useDice(8)
return <div>
<button type="button" onClick={roll1} children={d1 || "roll"} />
<button type="button" onClick={roll2} children={d2 || "roll"} />
<button type="button" onClick={roll3} children={d3 || "roll"} />
<pre>{JSON.stringify([d1, d2, d3], null, 2)}</pre>
</div>
}
function useDice(sides = 6) {
const [value, setValue] = React.useState(null)
return [
value,
event => {
setValue("...")
setTimeout(_ => setValue(Math.floor(Math.random() * sides) + 1), 1000)
}
]
}
ReactDOM.render(<App/>, document.querySelector("#app"))

button {
width: 3rem;
line-height: 3rem;
margin: 0 0.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

自定义挂钩可以返回任意数量的任何类型的值。考虑这种替代抽象，它返回一个值和一个组件，而不需要分配事件处理程序。

function App() {
const [value1, d1] = useDice(6)
const [value2, d2] = useDice(20)
const [value3, d3] = useDice(8)
return <div>
{d1} {d2} {d3}
<pre>{JSON.stringify([value1, value2, value3], null, 2)}</pre>
</div>
}
function useDice(sides = 6) {
const [value, setValue] = React.useState(null)
function roll(event) {
setValue("...")
setTimeout(_ => setValue(Math.floor(Math.random() * sides) + 1), 1000)
}
return [
value,
<button type="button" onClick={roll} children={value || "roll"} />    
]
}
ReactDOM.render(<App/>, document.querySelector("#app"))

button {
width: 3rem;
line-height: 3rem;
margin: 0 0.5rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>