时间戳

首页 > 解决方案 > 尝试将来自 API 的数据放到 React 中的模式上

javascript - 尝试将来自 API 的数据放到 React 中的模式上

问题描述

我正在尝试将我从 API 获取的数据放到一个模式中，每当单击按钮时就会出现该模式。

这是怎么做到的？我可以在没有模式的情况下使用来自 API 的数据，所以我知道这不是我的 componentDidMount() 语法的问题。不确定问题是什么以及如何解决。

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;

标签： javascriptreactjs

解决方案

看一下allItems，在您从 API 获取数据之前，它是一个空数组。

因此，对于第一次渲染（在组件安装之前）：

const allItems = this.state.items  // ----> const allItems = []

通过空数组进行映射不会产生任何错误并返回另一个空数组，但是当您通过空数组进行映射时，不要期望有任何itemor item.name。所以这itemArr不是您的期望并导致渲染它的问题。

为避免出现此问题，请检查您allItems以确保数据已到达。

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>
      )

推荐阅读