Question

我有一个父项get(config.PACKAGES_URL, { uuid: uuid, type: 'P12', purpose: 'MAINTENANCE' }, {Authorization: token})和一个子项App.js。当用户单击特定的餐卡时，它将引发一个模式，该模式应显示有关餐的更多信息。

因此，我试图找到一种方法，根据所点击的餐卡来动态更改模态数据

我试图将进餐的ID传递给MealModal.js函数，并将modalId的状态设置为该函数。但是我遇到了以下错误：

警告：在现有状态转换过程中无法更新（例如 onClick={this.openModal}或其他组件的构造函数中）。渲染方法应该是道具和国家的纯粹职能；构造函数的副作用是一种反模式，但可以将其移至“ componentWillMount”。

到目前为止，这是我的组件：

App.js：

render

MealModal.js

import React from 'react';

import MealCard from './MealCard';
import MealsMap from './MealsMap';
import MealsFilters from './MealsFilters';
import MealModal from './MealModal';


export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      modalIsOpen: false,
      modalId: 0
    }
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);

  };

  openModal() {
    this.setState({modalIsOpen: true});
  };

  closeModal() {
    this.setState({modalIsOpen: false});
  };

  render() {
    return (
      <div>
        <MealsFilters/>
        <div className="app-wrapper" style={{display: 'flex'}}>
          <div className="container">
            <div className="row">
              {[...Array(20)].map((x, i) =>
                  <div className="col-sm-6 col-xs-12 " key={i} onClick={this.openModal}>
                    <MealCard />
                  </div>
                )}
          </div>
        </div>
        <MealsMap/>
      </div>
      <MealModal modalIsOpen={this.state.modalIsOpen} closeModal={this.closeModal} modalId={this.state.modalId}/>
    </div>
    );
  }
}

关于我该怎么做的任何想法？

Answer 1

openModal(modalId) {
    this.setState({
       modalId,
       modalIsOpen: true
    });
  };

并将调用函数修改为

 <div className="col-sm-6 col-xs-12 " key={i} onClick={ () => this.openModal(x)}>
  MealCard />
 </div>

Answer 2

好，所以我找到了解决方法：

首先，我将父项的onClick={this.openModal}更改为onClick= () => {this.openModal}

第二，我将id添加为参数： onClick= () => {this.openModal(i)}

最后：更新openModal函数：

  openModal(modalId) {
    this.setState({modalIsOpen: true,
                   modalId});
  };

它有效。

动态更改反应模态数据

2 个答案: