如何修复错误类型错误：无法读取未定义的属性'map'

Question

错误在我的地图函数中给出。

我正在遵循一个reactjs教程，并且在将值从一个组件的状态传递到另一个组件时一直遇到问题。 我正在用axios.get()连接到后端。

export default class Viewcustomer extends React.Component{
constructor(props) {
super(props)
this.state = {
Id:"",
name:"",
fax:"",    
NIC: "",
type: "",
email: "",
website: "",
address: "",
phoneNo: "",
DOB: "",
note: "",
customer:[]  
}    
}
onChange = (e) => {
this.setState({[e.target.name]: e.target.value})
}
componentDidMount() {
axios.get(`http://localhost:5001/customer/view`)
.then(res => {
const customers = res.data;
this.setState({ customers });
})
}
render(){
return(
<table width="100%">
<tr>
<th>Id</th>
<th>name</th>
<th>fax</th>
<th>NIC</th>
<th>type</th>
<th>email</th>
<th>address</th>
<th>phoneNo</th>
<th>DOB</th>
<th>note</th>
</tr>
//Error raised by this line of code
{ this.state.customers.map(customer =>
<tr>
<td>{customer.Id}</td>
<td>{customer.name}</td>
<td>{customer.fax}</td>
<td>{customer.NIC}</td>
<td>{customer.type}</td>
<td>{customer.email}</td>
<td>{customer.address}</td>
<td>{customer.phoneNo}</td>
<td>{customer.DOB}</td>
<td>{customer.note}</td>
</tr>)}
</table>
)
}
}

错误消息的图像

编辑

错误与标有引号的行有关，由 map(( 函数引发的问题，但根本问题是this.state.customersundefined。

Answer 1

this.state.customers.map(...

问题是this.state.customers是在组件挂载时设置的，并且只有在使用 axios 的异步调用返回之后。这意味着首次呈现组件时，尚未设置this.state.customers。

可行的解决方案

要么在使用它之前检查this.state.customers是否存在，要么只是将其初始化为空数组。我注意到您正在将customer(单数(初始化为空数组，这是错字吗？

constructor(props) {
super(props)
this.state = {
Id:"",
name:"",
fax:"",    
NIC: "",
type: "",
email: "",
website: "",
address: "",
phoneNo: "",
DOB: "",
note: "",
customers:[] // initialize customers, this.state.customers is now defined
}
}

Answer 2

你应该知道的第一件事是componentDidMount在渲染方法之后运行。因此，在第一次渲染中，您的customer参数仍然是[]，即使您编写了一个简单的console.log()，componentDidMount它在渲染方法之后运行。

您可以通过运行以下代码来了解正在发生的事情：

class Test extends React.Component {
constructor(props){
console.log('constructor')
}
render(){
console.log('render')
}
componentDidMount(){
console.log('componentDidMount')
}
}

结果将是这样的：

构造 函数

呈现

组件迪德挂载

但是为了解决你的问题，你应该在等待收到来自 axios 的响应时显示一个微调器或类似的东西。 你的组件可能是这样的：

export default class Viewcustomer extends React.Component{
constructor(props) {
super(props)
this.state = {
Id:"",
name:"",
fax:"",    
NIC: "",
type: "",
email: "",
website: "",
address: "",
phoneNo: "",
DOB: "",
note: "",
customer:[]  
}    
}
onChange = (e) => {
this.setState({[e.target.name]: e.target.value})
}
componentDidMount() {
axios.get(`http://localhost:5001/customer/view`)
.then(res => {
const customers = res.data;
this.setState({ customers });
})
}
render(){
if(this.state.customers.length===0){
return(
<div>Loading...</div>
)
}
else{
return(
<table width="100%">
<tr>
<th>Id</th>
<th>name</th>
<th>fax</th>
<th>NIC</th>
<th>type</th>
<th>email</th>
<th>address</th>
<th>phoneNo</th>
<th>DOB</th>
<th>note</th>
</tr>
//Error raised by this line of code
{ this.state.customers.map(customer =>
<tr>
<td>{customer.Id}</td>
<td>{customer.name}</td>
<td>{customer.fax}</td>
<td>{customer.NIC}</td>
<td>{customer.type}</td>
<td>{customer.email}</td>
<td>{customer.address}</td>
<td>{customer.phoneNo}</td>
<td>{customer.DOB}</td>
<td>{customer.note}</td>
</tr>)}
</table>
)
}
}
}

如果有帮助，请投票给我：(

Answer 3

您的问题是，在您使用的用法中this.state.costumers并且您的定义状态为customer。

export default class Viewcustomer extends React.Component {
constructor(props) {
super(props)
this.state = {
Id: "",
name: "",
fax: "",
NIC: "",
type: "",
email: "",
website: "",
address: "",
phoneNo: "",
DOB: "",
note: "",
customers: []

}
}
onChange = (e) => {
this.setState(
{ [e.target.name]: e.target.value }
)
}
componentDidMount() {
axios.get(`http://localhost:5001/customer/view`)
.then(res => {
const customers = res.data;
this.setState({ customers });
})
}

render() {
const { costumers } = this.state:
return (
<table width="100%">
<tr>
<th>Id</th>
<th>name</th>
<th>fax</th>
<th>NIC</th>
<th>type</th>
<th>email</th>
<th>address</th>
<th>phoneNo</th>
<th>DOB</th>
<th>note</th>
</tr>
{customers.map(customer =>
<tr>
<td>{customer.Id}</td>
<td>{customer.name}</td>
<td>{customer.fax}</td>
<td>{customer.NIC}</td>
<td>{customer.type}</td>
<td>{customer.email}</td>
<td>{customer.address}</td>
<td>{customer.phoneNo}</td>
<td>{customer.DOB}</td>
<td>{customer.note}</td>
</tr>)}
</table>

)
}
}

这就是整个问题，因为当您将costumers状态初始化为空数组时，map方法将停止失败。希望这有帮助。此致敬意。

Answer 4

如其他答案中所述this.state.customersundefined抛出错误。这是因为最初在构造函数中，您初始化customer单数而不是customers，快速更改应该可以解决此问题。

我可以推荐，因为你正在看教程，React Hooks 是一种非常强大和直观的方式，它使用"无状态"(它们仍然持有状态(功能组件而不是类组件。它们大大简化了组件的编码，并使处理状态变得更加容易。