Question

我制造了一个手风琴，但是状态一次打开了一个手风琴，但是我一次只想打开一个。我有工作的国家，但它只是针对所有手风琴，而不是实际的。基本上，当用户单击手风琴时，它会下拉并显示通常的内容，但它显示的是所有手风琴打开的情况，但一次只能出现一次。

我在哪里错了？

    import React, { Component } from 'react';
    import axios from 'axios';
    import Icon from '../Icon/Icon';

class RestInfo extends Component {
  constructor() {
    super();

    this.toggle = this.toggle.bind(this);

    this.state = {
      disruptions: [],
      activeAcc: false
    };
  }

  componentDidMount() {
    axios
      .get('https://trasnport-api-isruptions-v2.azure-api.net/Disruption/v2/', {
        headers: {
          'Ocp-Apim-Subscription-Key': '55060e2bfbf743c5829b9eef583506f7'
        }
      })
      .then(response => {
        this.setState({
          disruptions: response.data.disruptions
        });
      });
  }

  toggle() {
    this.setState(prevState => {
      return {
        activeAcc: !prevState.activeAcc
      };
    });
  }

  render() {
    const { disruptions, activeAcc } = this.state;

    return (
      <div>
        {disruptions.length > 0 ? (
          disruptions.map(post => {
            return (
              <div key={post.id}>
                <div className={`wmnds-accordion ${activeAcc ? 'wmnds-is--open' : ''}`}>
                  <button
                    type="button"
                    aria-controls="accordion-custom-01"
                    className="wmnds-accordion__summary-wrapper"
                    aria-expanded="true"
                    onClick={this.toggle}
                  >
                    <div className="wmnds-accordion__summary">
                      <div className="wmnds-grid wmnds-grid--align-center">
                        <span className="wmnds-disruption-indicator-small wmnds-col-auto wmnds-m-r-md">
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="modes-isolated-bus" iconClass="modes-isolated-bus" />
                          </svg>
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="general-warning-circle" iconClass="general-warning-circle" />
                          </svg>
                        </span>
                        <div className="wmnds-col-auto">
                          <strong>{post.title}</strong>
                        </div>
                      </div>
                    </div>

                    <svg className="wmnds-accordion__icon">
                      <Icon iconName="general-expand" iconClass="general-expand" />
                    </svg>

                    <svg className="wmnds-accordion__icon wmnds-accordion__icon--minimise">
                      <Icon iconName="general-minimise" iconClass="general-minimise" />
                    </svg>
                  </button>

                  <div className="wmnds-accordion__content" id="accordion-custom-01">
                    <h4 className="serviceAffected">Affected Service(s) </h4>
                    {post.servicesAffected.map(affected => (
                      <div key={affected.id}>
                        <span className="wmnds-disruption-indicator-small wmnds-col-auto wmnds-m-r-md">
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="modes-isolated-bus" iconClass="modes-isolated-bus">
                              {affected.serviceNumber}
                            </Icon>
                          </svg>
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="general-warning-circle" iconClass="general-warning-circle" />
                          </svg>
                        </span>

                        <h5>routeDesc:</h5>
                        {affected.routeDesc}
                        <h5>serviceNumber:</h5>
                        {affected.serviceNumber}
                        <h5>direction</h5>
                        {affected.direction}
                      </div>
                    ))}

                    <p>{post.title}</p>
                    <p>{post.description}</p>
                    <p>{post.disruptionSeverity}</p>
                    <p>{post.mode}</p>
                    <p>{post.disruptionSeverity}</p>
                  </div>
                </div>
              </div>
            );
          })
        ) : (
          <div>
            <div className="wmnds-loader" />
          </div>
        )}
      </div>
    );
  }
}

export default RestInfo;

提前谢谢！

Answer 1

问题在于所有手风琴的状态相同，这就是为什么所有手风琴同时打开和关闭的原因。这里的想法是玩每个项目（手风琴）的标识符。我们知道循环中的所有项目都有一个以零开头的标识符。该项目的开头将基于以下事实：其标识符等于activeAcc和切换功能以此标识符为参数，以便能够为activeAcc分配相应项目的标识符。

import React, { Component } from 'react';
    import axios from 'axios';
    import Icon from '../Icon/Icon';

class RestInfo extends Component {
  constructor() {
    super();

    this.toggle = this.toggle.bind(this);

    this.state = {
      disruptions: [],
      activeAcc: 0
    };
  }

  componentDidMount() {
    axios
      .get('https://trasnport-api-isruptions-v2.azure-api.net/Disruption/v2/', {
        headers: {
          'Ocp-Apim-Subscription-Key': '55060e2bfbf743c5829b9eef583506f7'
        }
      })
      .then(response => {
        this.setState({
          disruptions: response.data.disruptions
        });
      });
  }

  toggle(key) {
    this.setState(prevState => {
      return {
        activeAcc: prevState.activeAcc===key?false:key
      };
    });
  }

  render() {
    const { disruptions, activeAcc } = this.state;

    return (
      <div>
        {disruptions.length > 0 ? (
          disruptions.map((post,key) => {
            return (
              <div key={post.id}>
                <div className={`wmnds-accordion ${activeAcc===key ? 'wmnds-is--open' : ''}`}>
                  <button
                    type="button"
                    aria-controls="accordion-custom-01"
                    className="wmnds-accordion__summary-wrapper"
                    aria-expanded="true"
                    onClick={()=>this.toggle(key)}
                  >
                    <div className="wmnds-accordion__summary">
                      <div className="wmnds-grid wmnds-grid--align-center">
                        <span className="wmnds-disruption-indicator-small wmnds-col-auto wmnds-m-r-md">
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="modes-isolated-bus" iconClass="modes-isolated-bus" />
                          </svg>
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="general-warning-circle" iconClass="general-warning-circle" />
                          </svg>
                        </span>
                        <div className="wmnds-col-auto">
                          <strong>{post.title}</strong>
                        </div>
                      </div>
                    </div>

                    <svg className="wmnds-accordion__icon">
                      <Icon iconName="general-expand" iconClass="general-expand" />
                    </svg>

                    <svg className="wmnds-accordion__icon wmnds-accordion__icon--minimise">
                      <Icon iconName="general-minimise" iconClass="general-minimise" />
                    </svg>
                  </button>

                  <div className="wmnds-accordion__content" id="accordion-custom-01">
                    <h4 className="serviceAffected">Affected Service(s) </h4>
                    {post.servicesAffected.map(affected => (
                      <div key={affected.id}>
                        <span className="wmnds-disruption-indicator-small wmnds-col-auto wmnds-m-r-md">
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="modes-isolated-bus" iconClass="modes-isolated-bus">
                              {affected.serviceNumber}
                            </Icon>
                          </svg>
                          <svg className="wmnds-disruption-indicator-small__icon">
                            <Icon iconName="general-warning-circle" iconClass="general-warning-circle" />
                          </svg>
                        </span>

                        <h5>routeDesc:</h5>
                        {affected.routeDesc}
                        <h5>serviceNumber:</h5>
                        {affected.serviceNumber}
                        <h5>direction</h5>
                        {affected.direction}
                      </div>
                    ))}

                    <p>{post.title}</p>
                    <p>{post.description}</p>
                    <p>{post.disruptionSeverity}</p>
                    <p>{post.mode}</p>
                    <p>{post.disruptionSeverity}</p>
                  </div>
                </div>
              </div>
            );
          })
        ) : (
          <div>
            <div className="wmnds-loader" />
          </div>           )}
      </div>
    );
  }
}

export default RestInfo;

Answer 2

class RestInfo extends Component {
  constructor() {
    super();

    this.toggle = this.toggle.bind(this);

    this.state = {
      disruptions: [],
      /** initially all toggles are in false state [false, false, ...] */
      activeAccordions: disruptions.map(i => false) /** [false, false, ..... till disruptions.length] */
    };
  }

  componentDidMount() {
    axios
      .get('https://trasnport-api-isruptions-v2.azure-api.net/Disruption/v2/', {
        headers: {
          'Ocp-Apim-Subscription-Key': '55060e2bfbf743c5829b9eef583506f7'
        }
      })
      .then(response => {
        this.setState({
          disruptions: response.data.disruptions
        });
      });
  }

  toggle(accordionIndex) {
    let activeAccordions = this.state.disruptions.map(i => false) /** close all open accordions */
    activeAccordions[accordionIndex] = !activeAccordions[accordionIndex] /** toggle the intended accordion */
    this.setState({ activeAccordions: activeAccordions });
  }

  render() {
    const { disruptions, activeAccordions } = this.state;

    return (
      <div>

        {disruptions.length > 0 ? (
          disruptions.map((post, postIndex) => {
            return (
              <div key={post.id}>
                <div className={`wmnds-accordion ${activeAccordions[postIndex] ? 'wmnds-is--open' : ''}`}>

ReactJS手风琴-应该一次打开所有手风琴

2 个答案: