反应 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 })，它将设置为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。