Question

我是reactjs hooks的初学者，只是想显示一条敬酒消息，但幸运的是它没有发生，但相同的代码可以很好地与类组件一起工作。

       onSubmit={(event) => {
                event.preventDefault();
                let errors = validateData(data);
                setData({...data, error:errors});
                if(!data.name || !data.number || !data.email || 
                !data.message){
                  return;
                }else if(data.number.length < 10 || 
                 !Validator.isEmail(data.email.toString().trim())){
                  return;
                }
                axios.post(url,{data})
                  .then((response) => {
                    toaster.notify(() => 'Hello world', {
                      duration: 2000
                    })
                    console.log('response is',response);
                  })
                  .catch((error) => {
                    console.log('error block called',error);
                  })
                setData(initialFormState);
              }

提交后，将调用成功块，但未显示给定的吐司，但同时会调用成功块内的控制台并给出响应。

Toaster plugin

Answer 1

首先，您对this的引用在功能组件中将不起作用，因此您可以安全地删除它，并确保所有引用都指向正确的变量和函数。

第二，setState在功能组件中不可用。这是钩子出现的地方。您需要使用钩子useState。

const [error,setError] = useState()

现在，您可以通过调用setError(error)来设置错误状态并引用这样的状态console.warn(error)

现在，按照我刚才的解释，您对组件中状态的所有初始化和引用都需要重写为钩子状态。

烤面包机在React挂钩中无法正常工作

1 个答案: