无法读取未设防映射的属性

Question

在从服务器获得一个GET http请求后，我正试图在本地主机浏览器上显示一个json数据集。

代码：

imports ...

class See extends Component {
state = { 
Sessions :[] , 
}

async componentDidMount(){

const {data: Sessions}= await axios.get("http://localhost:8765/...");

this.setState({Sessions});

}
render() { 

return ( 
<React.Fragment>
<Table striped bordered hover>
<thead>
<tr> 
<th>PointID</th>
<th>PointSessions</th>
<th>EnergyDelivered</th>
</tr>
</thead>
<tbody>
{this.state.Sessions.SessionsSummaryList.map(Session => (
<tr key="Session.PointID">
<th>Session.PointID</th>
</tr>  
))}
</tbody>
</Table>
</React.Fragment>                            
);  }
}

export default See;

该数据集由一些数据字段以及json对象列表组成(每个字段包含3个字段，如表头所示(。

使用chrome dev工具中的React扩展，我可以看到数据集是在状态下加载的，看起来像是应该加载的，但我得到了这个错误：

TypeError: Cannot read property 'map' of undefined

我在一个简单的打印中还看到，在运行此代码的过程中，render方法被调用了两次。是不是会话值在第一次运行时没有初始化？

如果是，我该如何解决？

Answer 1

您可以检查数组是否首先退出，然后进行析构函数，然后执行以下操作：

const { SessionsSummaryList } = this.state.Sessions || {}; 

{ SessionsSummaryList && SessionsSummaryList.map(
....
}

Answer 2

您的问题是react正在尝试映射您的对象，但该对象尚未填充数据。

我已经很久没有使用基于类的组件了，所以我只是给你一个如何做的想法

制作一个布尔状态(sry我在基于函数的组件中编写，只需转换它(

const [isFilled, setIsFilled] = useState(false);

现在说只要

isFilled＝＝true

这样做：

{this.state.Sessions.SessionsSummaryList.map(Session => (
<tr key="Session.PointID">
<th>Session.PointID</th>
</tr>  
))}

每当你用axios获取数据时，你必须：

axios.get(`XAXAXAXAXAXAXAX`)
.then(res => {
setIsFilled(true);
})

Answer 3

正如其他答案中所说，您需要检查您的状态是否具有您正在使用的值。在类组件中，状态不会立即更新，所以你需要一个条件来验证它

import React from "react";
import { render } from "react-dom";
import axios from "axios";
import "./style.css";
class App extends React.Component {
state = {
user: null
};
async componentDidMount() {
const { data: user } = await axios.get(
"https://jsonplaceholder.typicode.com/todos/1"
);
console.log("user = ", user);
this.setState({ user });
}
render() {
// Here is the conditions needed to prevent errors when state isn't refreshed yet
if (!this.state.user) return null;
return <div>Test = {this.state.user.userId}</div>;
}
}
render(<App />, document.getElementById("root"));