React JS使用async/await获取JSON数据返回undefined问题排查

AI 小北

2026-8-19

问题：使用async/await获取JSON后读取键值返回undefined

我使用async/await获取一个JSON对象，想要获取其中某个键的值，但返回结果为undefined。请问我的代码中是否遗漏了什么？

代码如下：

const [registerResponse, setRegisterResponse] = useState({
  duplicateUser: false, 
  registration: false, 
  username: ''
})

const submitHandler = async(e) => {
  e.preventDefault();
  // console.log(newuser)
  const result = await fetch(API_URL,postOptions);
  setRegisterResponse(result.json())
  console.log(registerResponse)
}
console.log(registerResponse.duplicateUser)

开发者工具输出截图：

问题原因与解决方案

result.json()需要await解析：result.json()是异步方法，会返回一个Promise，你直接把这个Promise赋值给了state，导致registerResponse存的是Promise对象而非解析后的JSON，自然读不到对应的键值。修正方式是先等待解析完成：
```
const data = await result.json();
setRegisterResponse(data);
```
setState是异步操作，无法立即读取最新值：React的状态更新是异步批量处理的，调用setRegisterResponse后立刻console.log(registerResponse)，输出的还是更新前的旧状态。如果要查看更新后的状态，需要用useEffect监听状态变化：
```
useEffect(() => {
  console.log(registerResponse.duplicateUser);
}, [registerResponse]); // 当registerResponse变化时执行
```
额外检查API返回结构：确认后端返回的JSON确实包含duplicateUser字段，可以在解析后先打印data查看：
```
const data = await result.json();
console.log(data); // 确认返回的数据结构是否符合预期
```