如何在React中将API获取的数据渲染到点击触发的Modal弹窗中

问题核心原因 #

你当前的问题是由3个代码错误共同导致的：

• Meal组件导入Modal时出现引用错误，实际渲染的是第三方原生react-modal组件，而非你自己编写的带API数据请求逻辑的Modal1组件
• 自定义的Modal1组件没有使用父组件传入的isOpen状态参数，弹窗的显隐控制逻辑失效
• 缺少react-modal必须的根节点绑定配置，会导致弹窗渲染异常

修复方案 #

1. 修复Meal组件的导入引用 #

将Meal.js顶部的导入语句替换为你自己编写的Modal1组件路径：

// 原来的错误导入，删除
// import Modal1 from 'react-modal';
// 替换为正确的自定义组件导入
import Modal1 from './Modal';

2. 修复自定义Modal1组件的弹窗控制逻辑 #

给Modal组件传入父级传递的显隐状态和关闭回调，完整代码如下：

import React from 'react';
import Modal from 'react-modal';

// 新增react-modal根节点绑定，id对应你项目public/index.html里的根容器id，通常是root
Modal.setAppElement('#root');

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 key={item.id}>
      <ul>
        <li>{item.name}</li>
      </ul>
    </div>)

    return (
      <div>
        {/* 给Modal传入控制属性，绑定关闭回调 */}
        <Modal
          isOpen={this.props.isOpen}
          onRequestClose={this.props.onClose}
          className={this.props.className}
        >
          {/* 可选添加关闭按钮 */}
          <button onClick={this.props.onClose}>关闭</button>
          {itemArr}
        </Modal>
      </div>
    )
  }
}

export default Modal1;

3. 修复Meal组件的Modal属性传递 #

给Modal1传入关闭回调方法：

// 把原来的<Modal1 className="modal-1" isOpen={this.state.isOpen}/>替换为
<Modal1 className="modal-1" isOpen={this.state.isOpen} onClose={this.turnOff}/>

4. 删除App.js中冗余的Modal1实例 #

App.js里<Modal1 isOpen={false}/>是无用代码，直接删除即可，你不需要在全局额外渲染Modal，每个Meal组件已经自带了弹窗实例。

完成以上修改后点击Steps按钮即可正常弹出带API请求数据的弹窗。

内容的提问来源于stack exchange，提问作者Andrew