老师您好

Question

老师您好，这是我定义的自定义hooks

我在第四行声明了一个useState

在第六行进行修改，

这张图是在组件中调用，

为啥我如果在第六行进行修改，会触发无限组件无限循环呢？

我如果在effect中修改，就没问题。

我是一个react初学者，我感觉是不是这样：

我以前一直以为，组件的更新，只是本组件的props和state更新才会更新，

但是在hooks中，我们的useState就等于state。我没有条件的直接修改useState，那么就会导致组件再次冲渲染，也就会导致useState再次更新（因为是无条件更新），于是就形成死循环。

所以state这种数据，必须是有条件的更新。

是这个问题嘛老师

啊啊啊 谢谢老师

====================================

老师我还有一个问题，就是effect似乎是异步的，我们可以使用async await来保证他的同步性嘛，您的代码里好像直接在effect下面return了结果，    为啥我的拿不到结果呢？崩溃

这里报错，说是unll不能个IMsg，也就是说，datas是null，看hooks：

这里应该是异步的，那么也就是return的时候datas就是null，发生setDatas之前就已经return了。

为啥老师您的代码里没有做过异步的处理，也成功了呢？

Answer 1

张轩 2020-06-20 21:24:18

同学你好 你第一个问题理解是正确的 就是那个原因引发了无限循环

第二个问题 因为你的声明 data 的时候是这样写的

const [data, setData] = useState(null)

所以这个时候 data 是个 null 类型的，所以自然就会出现错误。

我原本是这样写的。

const [data, setData] = useState<any>(null)

所以就没有了这个问题，当然这样做是不好的。

你可以这样声明他的初始值

const [data, setData] = useState<null | Imsg>(null)

这样它就变成了一个 null 或者 Imsg 的联合类型，这样就可以判断当它不是 null 的时候，再使用数据就很安全了，这称之为 type guard。

甚至你可以将 useURLLoader 本身作为一个 generic function，这样你就可以使用的时候返回对应的类型。

function useURLLoader<T = {}>(url: string, deps: any[] = [])  {
    const [data, setData] = useState<null | T>(null)
}

循序渐进的修改很有意思。

• 提问者 袁门弟子 #1

  非常感谢！

• 提问者 袁门弟子 #2

  原来如此！也就是说，您其实也没有处理异步的问题，而是说在类型方面进行了宽容的处理。所以在数据并没有的时候，也不会报出错误是这样吗老师？

• ywang04 回复 提问者 袁门弟子 #3

  你的代码之所以出现那个问题 是你写成了const [data, setData] = useState(null) 所以ts 认为data是null类型 然后如果你想type assertion 就必须写成 const dogResults = data as unknown as IMsg. 跟异步一点关系都没有。另外， 老师用的是Promise处理异步 你想用的是async和await处理异步 这两种都可以