在Reactjs中获取Neo4j数据时data.map报错及请求方法选择疑问

问题1 报错原因 #

你代码存在3处问题共同导致报错：

• 异常场景未处理导致state.data可能为非数组类型：如果Neo4j查询抛出错误进入catch分支，result会保持初始值null，后续执行result.records会直接抛出运行时异常，导致setState逻辑不会执行，此时如果直接调用this.state.data.map就会出现map is not a function的报错
• 渲染逻辑写法错误：this.state.data本身就是数组类型，不需要调用Object.keys()转译，Object.keys(数组)得到的是下标字符串数组，遍历拿到的item是下标而非数据对象，自然无法读取name、job字段
• Neo4j返回结果格式处理缺失：result.records是Neo4j的Record实例数组，不能直接通过.属性名的方式取字段，需要调用toObject()方法转成普通JS对象，或者用get('字段名')方法取值

对应的修复代码：
首先修改componentDidMount里的状态赋值逻辑：

await driver.close()
// 先把Record实例转成普通对象数组
const formatData = result ? result.records.map(record => record.toObject()) : []
this.setState({
  data: formatData
})

再修改render里的遍历逻辑：

{ this.state.data.map((item, index) => <MyCard key={index} name={item.name} job={item.job}/>) }

问题2 数据请求逻辑的位置选择 #

类组件的初始化数据请求本身就推荐在componentDidMount生命周期里执行，你当前把异步逻辑写在componentDidMount里的写法是正确的。如果已经封装了async fetchData方法，只需要在componentDidMount里调用这个方法即可，不需要完全改写现有逻辑，单独封装方法反而更方便后续逻辑复用和错误处理。

内容的提问来源于stack exchange，提问作者Raman