Sql （基本）如何修复React:TypeError:cannotreadproperty'；数据'；未定义的

我正在尝试将我的react页面连接到正在运行的节点服务器。当我尝试获取数据时，它会正确地调用它，但在将其显示到react首页时出现问题

我试图改变现状，但毫无结果

class App extends Component {
  state = {
    employees: []
  }

  componentDidMount() {
    this.getProducts();
  }

  getProducts = _ => {
    fetch('http://localhost:3003/employees')
      .then(response => response.json())
      .then(({data}) => {
        console.log("response" + data)
        console.log("response: " + data[0].id + " " + data[1].first_name)
      })
      .then(response => this.setState({ employees: response.data }))
      .catch(err => console.error(err))
  }

  renderEmployee = ({id, first_name}) => <div key = {id}></div>


  render() {
    const { employees } = this.state;
    return(
      <div className = "App"> 
        <p>test 1</p>
          {employees.map(this.renderEmployee)}
      </div>
    );
  }
}
export default App;

我从上面的console.log获得以下输出：

response[object Object],[object Object],[object Object] 
response: 1 Johnathan App

以及以下错误：

TypeError: Cannot read property 'data' of undefined

---

有什么想法吗？

您可以这样精简代码：

 getProducts = _ => {
    fetch('http://localhost:3003/employees')
      .then(response => this.setState({ employees: response.data }))

  }

我看到两个问题：

在提取对json对象的响应后，不需要另一个级别的{data}

呈现函数接受“员工”项，并应用于引用属性

类应用程序扩展组件{ 状态={ 员工：[] }

componentDidMount（）{
这个.getProducts（）；
}
getProducts=（）=>{
取（'http://dummy.restapiexample.com/api/v1/employees')
.then（response=>response.json（））
。然后（（数据）=>{
this.setState（{employees:data}）
})
.catch（err=>console.error（err））
}
renderEmployee=（雇员：任意）=>{employee.employee_name}
render（）{
const{employees}=this.state；
返回(
测试1

{employees.map（this.renderEmployee）}
);
}

}

---

为了测试它，在渲染函数中

console.log（this.state.employees）

当我测试它时，我得到了一个空数组和一个未定义的值。似乎数据没有正确加载。我做了您建议的更改，得到了一个“TypeError:无法读取未定义的属性'map'”我使用了条件呈现，例如“{employees&&employees.map（this.renderEmployee）}”，这样就消除了错误，但没有显示任何数据。我认为它装载不正确

 getProducts = _ => {
    fetch('http://localhost:3003/employees')
      .then(response => this.setState({ employees: response.data }))

  }

componentDidMount() {
  this.getProducts();
}

getProducts = () => {
  fetch('http://dummy.restapiexample.com/api/v1/employees')
    .then(response => response.json())
    .then((data) => {
        this.setState({ employees: data })
    })
    .catch(err => console.error(err))
}

renderEmployee = (employee: any) => <div key={employee.id}> {employee.employee_name}</div>


render() {
  const { employees } = this.state;
  return(
    <div className = "App"> 
      <p>test 1</p>
        {employees.map(this.renderEmployee)}
    </div>
  );
}