反应 this.state.addroom.map 不是一个函数

Question

所以我试图用一个按钮的按钮 onClick 生成一个 div，但我收到一个错误，阻止我这样做。错误：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>        )    }}}任何人都知道是什么原因造成的以及我们如何解决它？

Answer 1

您的代码有一些问题。

首先，addroom您的状态是构造函数中的字符串数组，但是在handleClick您设置它的方法this.setState({ addroom: htmlId })中，它将设置为 astring并且在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该数组中的一个项目。