Necesito mostrar datos JSON que provienen de webapi. Necesito completar el menú desplegable con los datos en REACT. Recibo el problema al completar los datos en .
console.log(this.state.Templatelist) devuelve los datos. estos datos provienen de api.
[{"Template_ID":11,"TemplateName":"All"},{"Template_ID":21,"TemplateName":"Test"}]
Por favor encuentra mi código:
import React from "react"; export class test extends React.Component { constructor(props) { super(props); this.state = { CopyFromTemplate_ID: "", Templatelist: [], } this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({ CopyFromTemplate_ID: event.target.value }); console.log(event.target.value) } componentDidMount() { this.getTemplateList(); } getTemplateList() { fetch(REQUEST_URL) .then(response => response.json()) .then((data) => { this.setState({ Templatelist: data, loading: false }) console.log(this.state.Templatelist); }) } render() { return ( <div> <form onSubmit={this.handleSubmit} > {this.state.Templatelist} <select size="1" value={this.state.CopyFromTemplate_ID} onChange={this.handleChange} > <option></option> {this.state.Templatelist.map((item) => <option id={item.Template_ID} value={item.Template_ID}> {item.value} </option>) } </select> </form> </div> ); } } export default test;Gracias
Dado que sus datos no están definidos o están a la espera de llegar, debe verificar si se trata de una matriz antes de procesarlos. Puede verificar si llegaron datos y si tienen una longitud, si no, luego renderice el componente de carga.
{this.state.Templatelist.length? this.state.Template.map((item) => <option id={item.Template_ID} value={item.Template_ID}> {item.value} </option>) : <p>...loading</p> }