TypeError：无法访问属性“错误”，数据未定义

如何解决TypeError：无法访问属性“错误”，数据未定义

忘记标题错误，无法修复:(.。我正试图从注册页面获取数据，这是我的JavaScript代码：

const SignupComponent = () => {
const [values,setValues] = useState({
    name: 'ryan',email: '[e-mail]',password: 'rrrrrr',error: '',loading: false,message: '',showForm: true
});

const { name,email,password,error,loading,message,showForm } = values;

const handleSubmit = e => {
    e.preventDefault();
    // console.table({ name,showForm });
    setValues({ ...values,loading: true,error: false });
    const user = { name,password };

    signup(user).then(data => {
        if(data.error) {
            setValues({ ...values,error: data.error,loading: false });
        } else {
            setValues ({ ...values,name: '',email: '',password: '',message: data.message,showForm: false});
        }
    });
};

const handleChange = name => e => {
    setValues({ ...values,error: false,[name]: e.target.value })

，所以当我尝试在页面中注册时，它说TypeError：无法访问属性“ error”，数据是未定义的。

              signup(user).then(data => {
> 25 |             if(data.error) {
     |               ^
  26 |                 setValues({ ...values,loading: false });
  27 |             } else {

注册功能

export const signup = (user) => { 
    return 
    fetch(${API}/signup,{ method: 'POST',headers: { Accept: 'application/json','Content-Type': 'application/json' },body: JSON.stringify(user) }) 
   .then(response => { return response.json(); }) 
     .catch(err => console.log(err));

我在编程方面有点笨拙，但我已经在互联网上寻找解决方案，但没有用

解决方法

在获取响应中调用json()方法时，将返回Promise，因为读取流对象将异步发生。因此，您要链接另一个然后起作用的函数来获取像这样的数据。

export const signup = user => {
  return fetch(`${API}/signup`,{
    method: "POST",headers: { Accept: "application/json","Content-Type": "application/json" },body: JSON.stringify(user)
  })
    .then(response => {
      return response.json();
    })
    .then(data => {
      return data;
    })
    .catch(err => console.log(err));
};

PS：由于您将async与Promises一起使用，因此您不需要使用await / .then()，也不需要在{内与另外一个.then()进行链接{1}}，因为您已经在称为signup()的{​​{1}}中进行了此操作。

,

我想您不太熟悉异步编程的概念。提取是Async函数，如果要等待它的输出，则必须使用Await关键字，该关键字也要求signup是异步的。因此，您的代码将如下所示：

export const signup = async (user) => { 
    
    let fetchResponse = fetch(${API}/signup,{ method: 'POST',headers: { Accept: 'application/json','Content-Type': 'application/json' },body: JSON.stringify(user) });

    return (await fetchResponse.json())

要了解有关异步编程的更多信息，建议阅读本文https://blog.risingstack.com/node-hero-async-programming-in-node-js/

,

尝试如下重写您的signup()函数。我想您错过了回头客，因为我以类似的方式实现了SignUp，并且对我有用。让我知道是否有帮助：

export const signup = (user) => { 
    return fetch(`${API}/signup`,{
     method: 'POST',headers: {
      Accept: 'application/json','Content-Type': 'application/json'
     },body: JSON.stringify(user)
    })
    .then(response => {
      return response.json();
    }) 
    .catch(err => console.log(err));

PS：既不需要使用async/await，也不需要使用.then()，也不需要在.then()内与另一个signup()进行链接已经在您称为handleSubmit()的{​​{1}}中进行了此操作。