Как предотвратить одновременный вызов нескольких зацикленных выходов в React?

Question

Я перебираю tds таблицы, и каждая ячейка в нижней строке представляет собой бизнес-описание со ссылкой ... Подробнее, которая открывает модальное окно. Когда я нажимаю на одну из них, она открывает не только модал для этой ячейки, но и все они, и, как ни странно, начинается с последней. Пожалуйста, посмотрите это видео для демонстрации:

https://youtu.be/M_EDh_jAWaw

Вот код:

  state = {
    showModal: false
  };

  toggleModal = () => {
    this.setState({showModal: true});
    console.log('showModal: ', this.state.showModal);
  }

И

  <tr style={{height: '132px'}}>
    {assignedServiceProviders.map((provider, index) => {
      return (
        <td key={index}>
          <Truncate lines={5} ellipsis={<span>... <a onClick={this.toggleModal} key={index}>Read more</a></span>}>
            {provider.description} asfasfdadfdas 46465464 adaddafafdadf 4654564564564 adsadfdafafdfd
          </Truncate>
          <If condition={this.state.showModal}>
            <AutomaticModalTrigger modal={businessDescriptionModal(provider.description)} key={index}>
              <span style={{ display: 'none' }} />
            </AutomaticModalTrigger>
          </If>
        </td>);
    })}
  </tr>

Когда я нажимаю на ссылку, нужно просто открыть только соответствующее описание бизнеса, а не любое другое! Кто-нибудь знает, как предотвратить такое поведение?

Answer 1

Проблема в том, что вы создаете несколько экземпляров модалов, когда вы зацикливаете свои assignServiceProviders . Я не думаю, что вам нужно несколько экземпляров, так как вы будете открывать только один за раз.

Когда вы устанавливаете модальное состояние на showModal . Вы фактически устанавливаете состояние для всех экземпляров сгенерированных модальных типов. Следовательно, вы заканчиваете тем, что открыли многократные модалы. В идеале вы должны иметь только один модальный режим и передавать данные в модальный режим.

Вы можете сделать это:

Во-первых, переместите модал из цикла, чтобы у вас был только один его экземпляр.

Передать данные на:

 <a>onClick={() => this.toggleModal(provider.description)} key={index}>Read more</a> 

Наконец, в функции toggleModal сначала установите описание , а затем откройте модальный.

Таким образом, все ваши ReadMore ссылки в конечном итоге вызовут один и тот же модальный экземпляр. Но с разными описаниями. Как только вы установите описание, вы можете перерисовать ваш компонент с уже существующим showModal состоянием.

Вот небольшой пример:

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      showModal: false,
      description: ''
    }
    this.list = [{description: 'desc1'}, {description: 'desc2'}];
  }

  onAnchorClick({description},event){
    this.setState({description, showModal: true});
  }

  render(){
    return(
      <div>
        {this.list.map((obj, idx) => <div key={idx}>
          <a onClick={this.onAnchorClick.bind(this, obj)}>Read More</a>
        </div>)}

        <div style={{display: !this.state.showModal ? 'none' : 'block'}}>
          <h3>Description: {this.state.description}</h3>
        </div>
      </div>
    )
  }
}

window.onload = () => {
    ReactDOM.render(<App />, document.getElementById("app"));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>