React this.state.addroom.map 不是函数

Question

所以我试图通过点击按钮生成一个 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 你不应该 return 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。

React this.state.addroom.map 不是函数

React this.state.addroom.map is not a function

javascript

reactjs

mern