[英]Using Array.map in react.js
I am having Uncaught TypeError: this.state.salaryDetails.map is not a function
error while using map in react js. I am having
Uncaught TypeError: this.state.salaryDetails.map is not a function
error while using map in react js. What may be the solution for this issue?这个问题的解决方案可能是什么? Following below is the code:
以下是代码:
import React, { Component } from 'react';
import httpBrowsing from './../../../utils/httpBrowsing';
import { NativeSelect, FormControl } from '@material-ui/core'
export class Salary extends Component {
constructor() {
super();
this.state = {
salaryDetails: '',
data: {
employeeName: '',
year: '',
month: ''
}
}
}
handleChange = (e) => {
const { name, value } = e.target;
this.setState((pre) => ({
data: {
...pre.data,
[name]: value,
employeeName: this.state.salaryDetails.filter((item) => item[name] === value)
}
}))
}
componentDidMount() {
httpBrowsing.get('/addemployee', true)
.then((data) => {
this.setState({
salaryDetails: data.data,
})
})
.catch(err => {
console.log("error", this.state);
debugger;
})
}
render() {
console.log("what is this >>", this.state);
console.log("finally>>", this.state);
const { salaryDetails } = this.state;
let Employ = this.state.salaryDetails.map((item, id) => <option key={id} value=
{item.name}>{item.name}</option>)
return (
<div>
<div className="container">
<div className="row">
<div className="col-md-6">
<label htmlFor="month">Month:</label>
<FormControl>
<NativeSelect defaultValue="" name="month" onChange=
{this.handleChange}>
<option >Choose</option>
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</NativeSelect>
</FormControl><br />
</div>
<div className="col-md-6">
<label htmlFor="year">Current Year:</label>
<FormControl>
<NativeSelect defaultValue="" name="Year" onChange=
{this.handleChange}>
<option >Choose</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
</NativeSelect>
</FormControl><br />
</div>
</div>
<div className="col-md-6">
<label htmlFor="Select Employee">Select Employee:</label>
<FormControl>
<NativeSelect defaultValue="" name="name" onChange=
{this.handleChange}>
<option >Choose</option>
{Employ}
</NativeSelect>
</FormControl><br />
</div>
</div>
</div >
)
}
}
I tried to use option from database using native select of material UI,but error is shown.what may be the issue?what may be the solution for the problem?How can i solve the issue?我尝试使用材质 UI 的本机 select 使用数据库中的选项,但显示错误。可能是什么问题?可能是什么问题的解决方案?我该如何解决这个问题? Please provide me a solution.
请给我一个解决方案。
Looking at the constructor within the component, the salaryDetails
state is initialised as an empty string, ''
.查看组件中的构造函数,
salaryDetails
state 被初始化为空字符串''
。
Array.map()
can only be used on arrays. Array.map()
只能用于 arrays。 THerefore, you should be initialising your salaryDetails
state as an empty array.因此,您应该将
salaryDetails
state 初始化为空数组。
this.state = {
salaryDetails: [],
data: {
employeeName: '',
year: '',
month: '',
},
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.