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

Question

出现标题错误，无法修复 :(。我正在尝试从注册页面获取数据，这是我的 javascript 代码：

const SignupComponent = () => {
const [values, setValues] = useState({
    name: 'ryan',
    email: 'ryan@gmail.com',
    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, email, password, error, loading, message, showForm });
    setValues({ ...values, loading: true, error: false });
    const user = { name, email, password };

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

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

，所以当我尝试在页面中注册时，它说 TypeError: can't access property "error", data is undefined.

              signup(user).then(data => {
> 25 |             if(data.error) {
     |               ^
  26 |                 setValues({ ...values, error: data.error, 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));

我在编程方面有点菜鸟，但我已经在互联网上寻找解决方案，没有任何工作你.U

Answer 1

我猜你对异步编程的概念不太熟悉。 Fetch 是一个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/

Answer 2

当您在 fetch 响应中调用 json() 方法时，将返回 Promise，因为读取流对象将异步发生。所以你要链接另一个 then 函数来获取这样的数据。

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/await，因为你正在使用带有.then()的Promises，也不需要在signup()中再使用一个.then()，因为你已经这样做了在handleSubmit() 中，您曾调用过signup()。

Answer 3

尝试重写您的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()的Promises，也不需要在signup()中再使用一个.then()，因为你已经在handleSubmit()中这样做了你打电话给signup()的地方。