Использование Array.map в react. js - PullRequest
Новая
       47

Использование Array.map в react. js

0 голосов
/ 07 мая 2020

У меня возникает ошибка Uncaught TypeError: this.state.salaryDetails.map is not a function при использовании карты в реакции js. Что может быть решением этой проблемы? Ниже приведен код: 

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 >
     )
   }
 }

Я попытался использовать опцию из базы данных, используя собственный пользовательский интерфейс выбора материала, но отображается ошибка. В чем может быть проблема? Что может быть решением проблемы? Как могу я решить проблему? Пожалуйста, дайте мне решение.

1 Ответ

4 голосов
/ 07 мая 2020

Если посмотреть на конструктор внутри компонента, состояние salaryDetails инициализируется как пустая строка, ''.

Array.map() можно использовать только в массивах. Поэтому вы должны инициализировать свое состояние salaryDetails как пустой массив. 

this.state = {
  salaryDetails: [],
  data: {
    employeeName: '',
    year: '',
    month: '',
  },
}
...