在 ReactJS 的基于类的组件中使用两个组件答案

【问题标题】：Using two components in a classed based component in ReactJS在 ReactJS 的基于类的组件中使用两个组件
【发布时间】：2020-11-18 15:18:41
【问题描述】：

我正在尝试在另一个组件中使用两个基于类的组件 <Cities> 和 <Hospital>。

我收到一个错误：-

已超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

我正在尝试创建 4 个按钮，这些按钮将显示那些带有点击按钮的城市的医院。

import React,{ Component } from 'react';
import Hospital from './hospital/hospital'
import Cities from '../sidebarcomp/cities'
class Hospitals extends Component {
state = {
    hospitals: [
      { id: 1, status: false, name: 'Apollo Hospital', city: 'Chennai', bedtype1: 500, bedtype2: 800, bedtype3: 1300,bed1av: 60, bed2av: 40, bed3av: 20, },
      { id: 2, status:false, name: 'Fortis Hospital', city: 'New Delhi', bedtype1: 600, bedtype2: 1000, bedtype3: 1400, bed1av: 60, bed2av: 40, bed3av: 20,  },
      { id: 3, status: true, name: 'Tata Memorial Hospital', city: 'Mumbai', bedtype1: 400, bedtype2: 800, bedtype3: 1200, bed1av: 60, bed2av: 40, bed3av: 20,  },
      { id: 4, status: true,name: 'Lilavati Hospital', city: 'Pune', bedtype1: 500, bedtype2: 900, bedtype3: 1300, bed1av: 60, bed2av: 40, bed3av: 20,  }
    ],
};

render() {
    return(
      <React.Fragment>
        <Cities
         hospitals={this.state.hospitals}
        /> 

        {this.state.hospitals.map((hospital, index) => {
        if(hospital.status){
        return (
        <Hospital
          name={hospital.name}
          bed1av={hospital.bed1av}
          bed2av={hospital.bed2av}
          bed3av={hospital.bed3av}
          key={hospital.id}
        />
      )};
        })}
        </React.Fragment>
    )
}
}

export default Hospitals;

Cities.js

import React,{ Component } from 'react';

class Cities extends Component {
nameChangedHandler = (id) => {
    const hospitalIndex = this.props.hospitals.findIndex(p => {
      return p.id === id;
    });

    const hospital = {
      ...this.props.hospitals[hospitalIndex]
    };

    // const person = Object.assign({}, this.state.persons[personIndex]);

    hospital.status = true;

    const hospitals = [...this.props.hospitals];
    hospitals[hospitalIndex] = hospital;

    this.setState((prevState,props) =>{
        return {
         hospitals: hospitals
        };
    });
  }

render(){
    return(
    <div>
        <button onclick={this.nameChangedHandler(1)}>Chennai</button>
        <button onclick={this.nameChangedHandler(3)}>Mumbai</button>
        <button onclick={this.nameChangedHandler(4)}>Pune</button>
        <button onclick={this.nameChangedHandler(2)}>New Delhi</button>
    </div>
)
}

}
export default Cities;

【问题讨论】：

你在哪个组件中使用setState？

标签： javascript reactjs

【解决方案1】：

问题是您在Cities 组件内调用setState 函数。

您应该做的是将nameChangedHandler 作为道具传递给 Cities 组件，以便它更新父组件（医院）的状态

class Hospitals extends Component {
    nameChangeHandler = (id) => {
        ....
    }
    ...
    <Cities nameChangedHandler={this.nameChangedHandler}/>

在 Cities.js 中

class Cities extends Component {
   // remove nameChangeHandlerFunction

   render(){
    return(
      <div>
        <button onClick={this.props.nameChangedHandler(1)}>Chennai</button>
        <button onClick={this.props.nameChangedHandler(3)}>Mumbai</button>
        <button onClick={this.props.nameChangedHandler(4)}>Pune</button>
        <button onClick={this.props.nameChangedHandler(2)}>New Delhi</button>
      </div>
      )
    }

【讨论】：

这会导致同样的问题...应该是箭头函数button onclick=() => {this.props.nameChangedHandler(1)
你也应该使用onClick而不是onclick
你应该用我的建议更新你的答案 - 这将导致与他在 onClick 中调用函数而不将其用作回调相同的问题...

【解决方案2】：

您必须使用如下处理程序：

nameChangedHandler = (id) => () => {

更多详情，请阅读我的另一个post

【讨论】：

【解决方案3】：

我认为这可能是因为您在渲染中使用了 console.log。如果你真的需要，我建议你把它放在退货中。

【讨论】：