在 React 类组件中未定义我的变量

Question

我的变量是未定义的，没有一个，为什么不呢？我定义错了什么？我需要更改整个方法还是可以根据我写的内容修复一些问题？我只把相关的部分放在这里谢谢！地址室.jsimport 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

好像：

• 你在那里缺少一些进口产品（厨房、浴室、卧室）；

• 不必要地覆盖构造函数来设置初始状态；

• 错误引用 setCategory（解构 this.state 或将其完全引用为：this.state.setCategory）；

• 没有将 state.setCategory 设置为任何有效值（这甚至应该属于状态还是应该从道具传递下来？如果是这样，请不要复制到状态）；

• 没有将 state.category 设置为任何有效值（如上所述）

• 可能缺少对选择的值绑定；

Answer 2

再见，您的代码中有一些错误。让我们尝试像这样重写组件：

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和调用之间建立了联系，return并正确定义了variablesin 状态，所以现在所有相关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>

        )

    }

}