Реагируйте this.state.addroom.map не является функцией - PullRequest
Новая
       10

Реагируйте this.state.addroom.map не является функцией

1 голос
/ 29 апреля 2020

Поэтому я пытаюсь сгенерировать div с помощью кнопки onClick кнопки, но я получаю ошибку, которая мешает мне сделать это.

Ошибка: TypeError: this.state.addroom.map is not a function

Но я увидел, что когда я нажимаю кнопку один раз, она не показывает ошибку, но не генерирует div с кнопкой.

Вот мой код: 


import React, { Component } from 'react';
import Select, { components } from 'react-select';
import styles from '../styles/loginsignup.css'
import axios from 'axios'
import nextId from "react-id-generator";
export default class AccomodationInfo extends Component {

    constructor() {
        super();
        this.state = {
            accomcate: null,
            addroom: ['one'],
            isLoading: true,
        }
      }
     handleClick = event => {
        const htmlId = nextId()
        event.preventDefault()
        const addroom = this.state.addroom
        this.setState({ addroom: htmlId })
        return (   
            <div>

                {this.state.addroom.map(addrooms => (
                  <button key= {addroom.id} className={addrooms.modifier}>
                    {addrooms.context}
                  </button>
                ))}
           </div>   
          );
    }



    render() {
         return(
           <div>
           <button onClick={this.handleClick}>Add</button>
           </div>

        )


    }


}
}

Кто-нибудь знает что вызывает это и как мы можем это исправить?

1 Ответ

1 голос
/ 29 апреля 2020

С вашим кодом есть несколько вещей.

Прежде всего addroom в вашем состоянии - это строковый массив в вашем конструкторе, но в методе handleClick вы устанавливаете его как this.setState({ addroom: htmlId }) который установит его на string, а на типе string функция map не определена, следовательно, ошибка. Вы должны добавить элемент в массив, например this.setState({ addroom: [...this.state.addroom, htmlId] })

Во-вторых, в вашем handleClick вы не должны возвращать jsx, если вы хотите визуализировать данные для вашего addroom массива, вы должны сделать это в метод render, а в handleClick нужно просто изменить переменную состояния addroom. Вы можете достичь этого следующим образом: 

render() {
  return (
    <div>
      <button onClick={this.handleClick}>Add</button>
      {this.state.addroom.map((addroom) => (
        <button>{addroom}</button>
      ))}
    </div>
    )
}

Наконец, ваша переменная addrom является только массивом строк, поэтому вы не можете получить доступ к id, modifier и context в элементе в этом массив.

...