javascript - 反应：获取状态变量是未定义的错误

Question

这是我的代码：

state={
   data:{},
   place:''
};

handlePlaceChange = async (place) => {
   const fetchedData = await fetchData(place);
   this.setState({data:fetchedData, place:place});
   console.log(data);
}

我正确地获取了 fetchedData，当我记录它时，我得到了我从另一个文件传递的预期对象。但是当我尝试控制台日志时，当我调用 handlePlaceChange 函数时出现此错误。

未处理的拒绝 (ReferenceError)：数据未定义。

但是数据是定义的，它是一个状态变量！！！！

Answer 1

用 console.log 中的 this.state.data 替换数据。

console.log(this.state.data)

此外，您的状态数据不会立即更新。所以，控制台日志会显示它的初始值。

要检查您的状态是否已根据需要获取数据，请将此控制台置于渲染功能中。

Answer 2

您应该在获取后提取 json 数据：

const fetchedData = await fetchData(place)
const data = await fetchedData.json()
this.setState({data, place:place})

啊，数据是undefined因为你只是在记录 undefined variable data，你应该记录到状态数据：this.state.data

console.log('fetched data: ', data, 'state data: ', this.state.data)

但是，您将获得初始状态数据，因为它是异步的。