创建一个新房间（包括输入和按钮）并且仅显示模板而没有内部值（rcc）

Question

在按钮处点击Create我要显示房间内容（array中objects持有的新values - value 我在 inputs) 里面写了但是由于某些原因它不起作用而且我无法解决它，问题是只有显示标题 Room 和 Type 显示时每个里面都没有 values 感谢帮手！

App.js

import React, { Component } from 'react'
import './App.css';
import Addroom from './components/Addroom.js'
import Room from './components/Room.js'
import 'bootstrap/dist/css/bootstrap.css';


export default class App extends Component {

  state={roomsList:[{room:'',type:''}]
}
  
  create=(r,t)=> {
    this.setState({roomsList:[...this.state.roomsList,{room:r,type:t}]})
  } 

  render() {
    return (
      <div>

<h1>My Smart House</h1>


{this.state.roomsList.map((element)=>{
         return <Room r={element.room} t={element.type} />

        

       })}

      <Addroom add={this.create}/>
        
      </div>
    )
  }
}

Addroom.js

import React, { Component } from 'react'

export default class Addroom extends Component {

    constructor(props) {
        
        super(props)
        
        }

        addRoomName=(e)=> {
            this.setState({room:e.target.value})

        }
        addType=(e)=> {
            this.setState({type:e.target.value})
        }


    createRoom=()=> {
        this.props.add(this.state.room,this.state.type);
    }


    render() {
        return (
            <div>

                <input onChange={this.addRoomName} placeholder='Name Your Room'/><br/>
                <input onChange={this.addType} placeholder='Whats The Room Type?'/><br/>
                <button onClick={this.createRoom}>Create</button>
                
            </div>
        )
    }
}

Room.js

import React, { Component } from 'react'

export default class Room extends Component {

    constructor(props) {
        super(props)
    
        this.state = {
             
        }
    }
    
    render() {
        return (
            <div>
                <h1>Room: {this.props.room} </h1>
                <h3>Type: {this.props.type} </h3>
                
            </div>
        )
    }
}

Answer 1

我解决了这个错误，这是一个语法错误，所以我做了什么，我只是要求从 Room.js [=15] objects 中获取里面的 value =], 所以之前看起来是这样的:

render() {
        return (
            <div>
                <h1>Room: {this.props.room} </h1>
                <h3>Color: {this.props.type} </h3>
                
            </div>
        )
    }
}

现在我只是修复了语法，让 App.js component 明白我想在 objects 中显示值，当我用我的 button，因为现在 r 和 t 代表变量的值..

render() {
        return (
            <div>
                <h1>Room: {this.props.r} </h1>
                <h3>Color: {this.props.t} </h3>
                
            </div>
        )
    }
}

这是一个非常小的错误，很容易理解，所以慢慢地、安全地检查你的代码总是很重要的！希望它能在未来帮助一些 f.e 开发者..

创建一个新房间（包括输入和按钮）并且仅显示模板而没有内部值（rcc）

Creating a new room (including inputs and button) and only template shows without the values inside (rcc)

arrays

constructor

class

reactjs

react-props