Question

我只是进入“ REACT”世界来完成我自己的项目的前端，我在使用功能图2天时遇到问题，我从后端获取数据，并且将ID保存在Cuartos中数组，我不知道我的错误是什么，我尝试在console.log中使用for循环，在render以外的函数中工作，但是它可以工作，但是在render函数中如何解决呢？我需要在渲染中获取所有的cuarto ID 这是我的代码

class FormInterruptor extends React.Component {
    constructor (){
        super();
        const axx={au:[]};
        const Cuartos = [];
        axios.get("http://localhost:5000/API/Cuartos")
        .then(response => {

           const  a=JSON.stringify(response.data);
            console.log(response.data);
            axx.au=response.data;
           const b=JSON.stringify(axx.au.idcuarto);
            console.log("aqui estas" )
           for (let i = 1; i < b.length; i=i+2)
           {
                 Cuartos.push({idcuarto:parseInt((JSON.stringify(axx.au.idcuarto))[i])});
             }
        });


        this.state = {
            IdInterruptor: '',
            IdCuarto: '',
            Pin: '',
            Dimmer: '',
            Cuartos
          };


        }

          onChange(e){
            this.setState({
              [e.target.name]:e.target.value
                     });
          }

      handleSubmit = event => {
            event.preventDefault();

            const Luz = {
              IdInterruptor: this.state.IdInterruptor,
              IdCuarto: this.state.IdCuarto,
              Pin: this.state.Pin,
              Dimmer: this.state.Dimmer

            };

            //AYUDA CON EL LUGAR DODNE SE PONDRA EL INTERRUPTOR 

            let config = {headers: {'Access-Control-Allow-Origin': "*"}};
            axios.post('http://localhost:5000/API/Cuarto/1/Luz/add',  Luz , config)
              .then(res => {
                //console.log(res);
                console.log(res.data);
              })
          }
    render(){

        return (

          <div className="App">
          <header className="App-header">
          <img src={process.env.PUBLIC_URL + '/Images/Escudo.png'} alt='Escudo' width='400'/>

            <div  className="Formulario"> 
            <h2>
              Formulario Luz
            </h2>
            <form onSubmit={this.handleSubmit} >

                <div id='form'>
               <input  id="form" type="text"placeholder="ID del interruptor" value={this.state.IdInterruptor} name="IdInterruptor" onChange={this.onChange.bind(this)} />
               </div>
               <div id="separador">


               <select   id="form" name="IdCuarto"   value={this.state.IdCuarto} onChange={this.onChange.bind(this)} >

               </select>
               </div>

               <div id="separador">

               <input  id="form" type="text" name="Pin"  placeholder="Pin" value={this.state.Pin} onChange={this.onChange.bind(this)} />
               </div>
               <div id="separador">

               <input id="form" type="text" name="Dimmer"  placeholder ="Dimmer" value={this.state.Dimmer} onChange={this.onChange.bind(this)}/>
               </div>
               <div >
                <input type="submit" value="Submit" className="button" onChange={this.onChange}/>
                </div>


              </form>
              </div>
              <div> 

               {this.state.Cuartos.map(p => {
                       return  <p  > {p.idcuarto} !</p>}
                            )}


              </div>

          </header>
        </div>

        );

    }
    }

    export default FormInterruptor

更新：我更改代码，并更改componentDidMount中的状态，并且这是我的Cuartos数据数组，我需要如何使用map函数

enter image description here

Answer 1

在componentDidMount中进行api调用，然后将数据保存为状态，然后在渲染之前对数据进行操作。

class FormInterruptor extends React.Component {
    constructor (){
        super();
        this.state = {
            IdInterruptor: '',
            IdCuarto: '',
            Pin: '',
            Dimmer: '',
            Cuartos:[]
          };
        }
         componentDidMount(){
         axios.get("http://localhost:5000/API/Cuartos")
        .then(response => this.setState({Cuartos:res.data}));
         }
          onChange(e){
            this.setState({
              [e.target.name]:e.target.value
                     });
          }

      handleSubmit = event => {
            event.preventDefault();

            const Luz = {
              IdInterruptor: this.state.IdInterruptor,
              IdCuarto: this.state.IdCuarto,
              Pin: this.state.Pin,
              Dimmer: this.state.Dimmer

            };

            //AYUDA CON EL LUGAR DODNE SE PONDRA EL INTERRUPTOR 

            let config = {headers: {'Access-Control-Allow-Origin': "*"}};
            axios.post('http://localhost:5000/API/Cuarto/1/Luz/add',  Luz , config)
              .then(res => {
                //console.log(res);
                console.log(res.data);
              })
          }
    render(){

        return (

          <div className="App">
          <header className="App-header">
          <img src={process.env.PUBLIC_URL + '/Images/Escudo.png'} alt='Escudo' width='400'/>

            <div  className="Formulario"> 
            <h2>
              Formulario Luz
            </h2>
            <form onSubmit={this.handleSubmit} >

                <div id='form'>
               <input  id="form" type="text"placeholder="ID del interruptor" value={this.state.IdInterruptor} name="IdInterruptor" onChange={this.onChange.bind(this)} />
               </div>
               <div id="separador">


               <select   id="form" name="IdCuarto"   value={this.state.IdCuarto} onChange={this.onChange.bind(this)} >

               </select>
               </div>

               <div id="separador">

               <input  id="form" type="text" name="Pin"  placeholder="Pin" value={this.state.Pin} onChange={this.onChange.bind(this)} />
               </div>
               <div id="separador">

               <input id="form" type="text" name="Dimmer"  placeholder ="Dimmer" value={this.state.Dimmer} onChange={this.onChange.bind(this)}/>
               </div>
               <div >
                <input type="submit" value="Submit" className="button" onChange={this.onChange}/>
                </div>


              </form>
              </div>
              <div> 

               {this.state.Cuartos.map(p => {
                       return  <p  > {p.idcuarto} !</p>}
                            )}


              </div>

          </header>
        </div>

        );

    }
    }

    export default FormInterruptor

Answer 2

您不建议在构造函数中进行调用，请尝试在componentDidMount中进行 Javascript是异步的，因此在使用axios进行调用时，它不会等到响应返回后才继续呈现该组件，因此您需要在收到响应后更新组件如果您仍想使用现有代码进行渲染，请在axios回调内的for循环之后添加以下行

this.setState({"Cuartos": Cuartos})

Answer 3

首先，您应该做的是在ComponentDidMount生命周期挂钩中而不是构造函数中发出HTTP请求，因为构造函数的purpose仅用于

通过将对象分配给this.state来初始化本地状态。绑定

实例的事件处理程序方法。

constructor(props) {
  super(props);
  this.state = {
    IdInterruptor: '',
    IdCuarto: '',
    Pin: '',
    Dimmer: '',
    Cuartos: undefined,
  }
}

componentDidMount() {
  let Cuartos;
  axios.get("http://localhost:5000/API/Cuartos")
    .then(response => {

       const  a=JSON.stringify(response.data);
        console.log(response.data);
        axx.au=response.data;
       const b=JSON.stringify(axx.au.idcuarto);
        console.log("aqui estas" )
       for (let i = 1; i < b.length; i=i+2) {
         Cuartos.push({idcuarto:parseInt((JSON.stringify(axx.au.idcuarto))[i])});
       }
       this.setState({ Cuartos });
    });

}

然后，在渲染上执行检查，以便仅在返回请求且定义了Cuartos且Array.map()数组不为空时才执行idcuartos 。

render() {
  const { Cuartos } = this.state;

  return <>
   <div> 
     {
       Cuartos && Cuartos.idcuartos.length && Cuartos.idcuartos.map(p => {
         return . <p>{q}</p>
       })
     }
   </div>
  </>

}

我无法使用地图功能TypeError：无法读取未定义的属性“地图”

3 个答案: