我有一个自定义钩子,它通过它获取的参数返回一个对象,我需要使用任何更新的参数重新创建它,所以我需要在内部执行此操作useEffect
但我无法调用 useEffect 中的钩子。知道如何实施吗?
自定义钩子:
useBuilder.tsx
export default function useBuilder(user) {
const api = useGlobalApi()
const user = ...
// doing a lot of requests and logic here that depends on the current user
...
return builder
}
对于每个选定的用户,我需要一个新的builder
从自定义挂钩构造和返回的对象取决于所选的用户。
用法:
Api.tsx
export default function User() {
const [users, setUsers] = useState([])
const [user, setUser] = useState({})
const [builder, setBuilder] = useState({})
const usersData = api.get('/../users')
useEffect(() => {
if (!usersData?.length) return
setUsers(usersData)
setUser(usersData[0])
}, [usersData])
useEffect(() => {
const builder = useBuilder(user)
setBuilder(builder)
}, [user])
return (
<Select
value={user}
onChange={e => {
setUser(user)
}}
>
{users.map(user => (
<MenuItem key={user.id} value={user}>
{user.name}
</MenuItem>
))}
</Select>
)
}
我收到此错误:
未捕获的错误:无效的挂钩调用。钩子只能在函数组件的主体内部调用。发生这种情况可能是由于以下原因之一:
- 您的 React 和渲染器版本可能不匹配(例如 React DOM)
- 你可能违反了 Hooks 规则
- 您可能在同一个应用程序中拥有多个 React 副本`
知道如何解决这个问题并获得预期的结果吗?
Edit:
我想避免接触自定义钩子,因为这是一个具有很多用途的全局自定义钩子。
删除调用处的效果useBuilder
,只需调用组件顶层的自定义挂钩即可。但是,当以下任一情况时,都会调用自定义挂钩users
or user
状态变量发生变化,但您仍然应该得到您想要的结果,因为useBuilder
它的逻辑仅基于user
.
export default function User() {
const [users, setUsers] = useState([])
const [user, setUser] = useState({})
// const [builder, setBuilder] = useState({}) // remove this
const builder = useBuilder(user) // use custom hook here
const usersData = api.get('/../users')
useEffect(() => {
if (!usersData?.length) return
setUsers(usersData)
setUser(usersData[0])
}, [usersData])
return (
<Select
value={user}
onChange={e => {
setUser(user)
}}
>
{users.map(user => (
<MenuItem key={user.id} value={user}>
{user.name}
</MenuItem>
))}
</Select>
)
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)