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

Question

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

我只把相关的部分放在这里

谢谢！

地址室.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

好像：你在那里缺少一些进口产品（厨房、浴室、卧室）；不必要地覆盖构造函数来设置初始状态；错误引用 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) {&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; super(props)&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; roomTypes:["kitchen", "bathroom", "bedroom"],&nbsp; &nbsp; &nbsp; &nbsp; roomSelected: ''&nbsp; &nbsp; }}&nbsp;setCategory = (roomSel) => {&nbsp; &nbsp; &nbsp;this.setState({roomSelected : roomSel});&nbsp;};render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h1>Select Room Type!</h1>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select onChange={(e) => setCategory(e.target.value)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.state.roomTypes.map(type => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value={type}>{type}</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;})&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )}}现在您已经在 中选择了房间this.state.roomSelected。

Answer 3

现在它的作品很完美，所有相关variables的都被导入和识别。我使用了一种稍微不同的方法，使用下面的方法稍作改动。我在函数的写入function和调用之间建立了联系，return并正确定义了variablesin 状态，所以现在所有相关variables的都被导入和识别，一切正常。谢谢你们！import React, { Component } from 'react'export default class Addroom extends Component {&nbsp; &nbsp; constructor(props) {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; super(props)&nbsp; &nbsp; &nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; roomTypes:["kitchen", "bathroom", "bedroom"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; roomSelected: '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; roomSel:''&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; setCategory = (roomSel) => {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({roomSelected : roomSel});&nbsp; &nbsp; };&nbsp; &nbsp; render() {&nbsp; &nbsp; &nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h4>Select Room Type</h4>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select onChange={(e) => this.setCategory(e.target.value)}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{this.state.roomTypes.map((type) =>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value={type}>{type}</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)}&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select><br/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; }}