setTimeout导致TypeError：Object（...）不是函数

Question

我正在用React开发一个小的电话簿网页，当添加人员或更新人员信息时，我希望在页面上显示一条小通知。我通过使用React挂钩来做到这一点，以便为变量message和errorMessage提供状态。

更新后，相关邮件会收到其内容（例如“添加了新联系人”），并且使用setTimeout(() => {setMessage('')}, 6000)来清除邮件。

我试图用关键字“ TypeError，setTimeout”等搜索找到的每个线程，但没有结果。我什至不明白是什么问题。我要完全删除setTimeout，一切正常（消息不会消失）。

下面不是我使用的代码，但是它确实包含相同的问题，即setTimeout导致TypeError。联系人没有更新，我们只是尝试使用setTimeout更改消息的状态。

import React, {useState, setTimeout} from 'react';

const Test = () => {
    //Setting up message
    const [message, setMessage] = useState('')
    //Change the state of message to Testing after 6 seconds
    setTimeout(() => {setMessage("Testing")}, 6000)
    return (
        <div></div>
    )
}

export default Test

Answer 1

setTimeout带有JavaScript，而{strong> NOT 来自React，

从setTimeout导入react时，您会遇到此错误，

import React, {useState, setTimeout} from 'react';

只需从导入中删除setTimeout，

import React, {useState} from 'react';

Answer 2

您正在从React导入setTimeout，这就是问题所在。只需将其从导入中删除，就可以了，因为它是本机javascript方法。

此外，进行此类更改时，请尝试使用useEffect。

import React, { useState, useEffect } from 'react';
  useEffect(() => {
     const timeout = setTimeout(() => {setMessage("Testing")}, 6000)
     return () => {
        clearTimeout(timeout)
     }

  });

这避免了每次渲染组件时都设置超时，并且在卸载组件时将其清除。