在反应 class 组件中未定义我的变量

Question

我的变量是未定义的，没有一个，为什么不呢？ 我错误地定义了什么？ 我需要更改整个方法还是可以根据我写的内容修复一些东西？

我在这里只放了相关的组件

谢谢！

Addroom.js

import React, { Component } from 'react'

export default class Addroom extends Component {

    constructor(props) {
        
        super(props)
        this.state = {

            category,
            setCategory,
            roomTypes:[kitchen, bathroom, bedroom],
            yourRoom
        }}

        getSelectedRoomInCategory = () => {
            return roomTypes.filter(
              (yourRoom) => yourRoom.category === category
            );
          };

  
    render() {
        return (
            <div>
                <h1>Select Room Type!</h1> 

                <select onChange={(e) => setCategory(e.target.value)}>
                <option value={kitchen}>{kitchen}</option>
                <option value={bathroom}>{bathroom}</option>
                <option value={bedroom}>{bedroom}</option>
                </select>
            </div>
        )
    }
}

Answer 1

好像：

• 你在那里缺少一些进口产品（厨房、浴室、卧室）；
• 不必要地重写构造函数以设置初始 state；
• 错误地引用 setCategory（解构 this.state 或将其完全引用为：this.state.setCategory）；
• 没有将 state.setCategory 设置为任何有效值（这甚至应该属于 state 还是应该从道具传递下来？如果是，不要复制到状态）；
• 未将 state.category 设置为任何有效值（如上）
• 可能缺少 select 上的值绑定；

Answer 2

Ciao，你的代码有一些错误。 让我们尝试像这样重写组件：

import React, { Component } from 'react'

export default class Addroom extends Component {

constructor(props) {
    
    super(props)
    this.state = {
        roomTypes:["kitchen", "bathroom", "bedroom"],
        roomSelected: ''
    }}

 setCategory = (roomSel) => {
     this.setState({roomSelected : roomSel});
 };


render() {
    return (
        <div>
            <h1>Select Room Type!</h1> 

            <select onChange={(e) => setCategory(e.target.value)}>
               this.state.roomTypes.map(type => {
                  <option value={type}>{type}</option>
               })
      
            </select>
        </div>
    )
}
}

现在您在this.state.roomSelected中选择了房间。

Answer 3

现在它的工作完美，所有相关variables都被导入和识别。 我使用了一种稍微不同的方法，使用下面写的稍加改动的方法。

我在编写的function和 function 的调用之间建立了联系，并在return中正确定义了variables ，因此现在所有相关variables都已导入并识别，一切正常。 谢谢你们！

import React, { Component } from 'react'

export default class Addroom extends Component {

    constructor(props) {
        
        super(props)
        this.state = {
          
            roomTypes:["kitchen", "bathroom", "bedroom"],
            roomSelected: '',
            roomSel:''
    

        }}

    setCategory = (roomSel) => {
        this.setState({roomSelected : roomSel});
    };

    render() {
        return (
            <div>

            <h4>Select Room Type</h4>
            <select onChange={(e) => this.setCategory(e.target.value)}>
               {this.state.roomTypes.map((type) => 
                  <option value={type}>{type}</option>
               )}
      
            </select><br/>
            </div>
        )
    }

}