Estoy intentando poner los datos que obtengo de una API en un modal que aparecerá cada vez que se haga clic en un botón.
¿Cómo se hace esto? Puedo usar los datos de la API sin el modal, así que sé que no es un problema con la sintaxis de mi componenteDidMount(). No estoy seguro de cuál es el problema y cómo se puede resolver.
import React from 'react'; import './App.css'; import Nav from './Nav'; import Meal from './Meal'; import meals from './Meals'; import Modal1 from './Modal' function App() { const mealArr = meals.map(item => <Meal food={item.food} picture={item.picture} type={item.id} />) return ( <div className="content"> <Nav /> {mealArr} <Modal1 isOpen={false}/> </div> ); } export default App; import React from 'react'; import Modal from 'react-modal'; class Modal1 extends React.Component { constructor(props) { super(props); this.state = { items: [], isLoaded: false } } componentDidMount() { fetch('https://jsonplaceholder.typicode.com/users') .then(res => res.json()) .then(json => { this.setState({ isLoaded: true, items: json }) }) } render() { const allItems = this.state.items; let itemArr = allItems.map(item => <div> <ul> <li key={item.id}>{item.name}</li> </ul> </div>) return ( <div> <Modal> {itemArr} </Modal> </div> ) } } export default Modal1; import React, {Component} from 'react'; import Modal1 from 'react-modal'; class Meal extends Component { constructor(props) { super(props); this.state = { isOpen: false } this.handleClick = this.handleClick.bind(this); this.turnOff = this.turnOff.bind(this); } handleClick() { this.setState({isOpen: true}) } turnOff() { this.setState({isOpen: false}) } render() { return ( <div className="meal-container"> <h2>{this.props.type}</h2> <h1>{this.props.food}</h1> <img alt="" src={this.props.picture} /> <p className="steps-button" onClick={this.handleClick}>Steps</p> <Modal1 className="modal-1" isOpen={this.state.isOpen}/> </div> ) } } export default Meal;eche un vistazo a allItems , es una matriz vacía antes de obtener los datos de la API.
Entonces, para el primer renderizado (antes de que se montara el componente):
const allItems = this.state.items // ----> const allItems = [] mapear a través de una matriz vacía no producirá ningún error y devolverá otra matriz vacía, pero cuando mapea a través de una matriz vacía, no espere tener ningún item o item.name . por lo tanto, itemArr no es como esperaba y causa el problema al renderizarlo.
para evitar este problema, verifique allItems para asegurarse de que los datos hayan llegado.
const allItems = this.state.items; let itemArr = [] if (allItems.length > 0) { itemArr = allItems.map(item => ( <div> <ul> <li key={item.id}>{item.name}</li> </ul> </div> ) } return ( <div> <Modal> {itemArr} </Modal> </div> )