我需要更改切換功能以一次顯示1個元素而不是顯示所有元素？

Question

我正在構建一個狗品種信息應用程序，當我點擊品種名稱時，我只想顯示該品種的信息。 目前，切換功能確實在點擊品種名稱時顯示狗品種信息，但它顯示所有品種的信息，而不僅僅是品種點擊的品種。

我認為問題是我沒有正確調用對象id，但我無法弄清楚id需要調用的位置。 我錯過了什么？ 謝謝！

class Dog extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dogInfo: [
                {
                    id: 1,
                    key: 'dogBreed',
                    breedName: 'Tibetan Mastiff',
                    class: 'Working',
                    colors: ['Black', 'Black & Tan', 'Blue Gray', 'Blue Gray & Tan', 'Brown', 'Brown & Tan', 'Red Gold', 'Red Gold Sable'],
                    image: tibetanMastiff,
                    alt: 'Black and Tan Tibetan Mastiff'
                },
                {
                    id: 2,
                    key: 'dogBreed',
                    breedName: 'Great Dane',
                    class: 'Working',
                    colors: ['Black', 'Black & White', 'Blue', 'Brindle', 'Fawn', 'Harlequin', 'Mantle', 'Merle', 'White'],
                    image: greatDane,
                    alt: 'Merle Great Dane'
                },
                {
                    id: 3,
                    key: 'dogBreed',
                    breedName: 'Cavalier King Charles Spaniel',
                    class: 'Toy',
                    colors: ['Blenheim', 'Black & Tan', 'Tri-Color', 'Ruby'],
                    image: cavalier,
                    alt: 'Tri-Color Cavalier King Charles Spaniel'
                },
                {
                    id: 4,
                    key: 'dogBreed',
                    breedName: 'Italian Greyhound',
                    class: 'Toy',
                    colors: ['Black', 'Blue', 'Blue Fawn', 'Cream', 'Fawn', 'Red', 'Red Fawn', 'Sable', 'Seal'],
                    image: italianGrayhound,
                    alt: 'Fawn Italian Grayhound'

                }
            ]
        }
    }

    toggleSelected(id, key){
        let temp = this.state[key]
        temp[id].selected = !temp[id].selected
        this.setState({
            [key]: temp
        })
    }

  render() {
    return (
      <div className="App">
                <div className='wrapper'>
                    <DogList 
                        title='Choose Dog Breed'
                        breedInfo={this.state.dogInfo}
                        toggleItem={this.toggleSelected}
                    />
                </div>
      </div>
    );
  }
}
export default Dog;


class DogList extends React.Component {
   constructor(props) {
    super(props);
    this.state = {
       listOpen: false,
       headerTitle: this.props.title
    }
   }

   toggleList(){
    this.setState(prevState => ({
       listOpen: !prevState.listOpen
    }))
   }

   render(){
    const{breedInfo} = this.props
    const{listOpen, headerTitle} = this.state

    return(
       <div>
          <div >{headerTitle}</div>
          {<ul onClick={() => this.toggleList()}>
        {breedInfo.map((dog) => (
        <li key={dog.id} >{dog.breedName}               
        {listOpen && <ul onClick={() => this.toggleList()}>
           <img src={dog.image}/>
           <li key={dog.id} >{dog.colors.map((color) => (                        
                      <ul>                           
                         <li>{color}</li>                
                      </ul>
           ))}</li>
        </ul>}
        </li>
            ))}
          </ul>}
       </div>
    )
   }
}

export default DogList;

Answer 1

你好smallDisgruntledDog，順便說一句好名字。 看看你的代碼，有很多方法可以實現你正在尋找的東西。 按照目前的構造，看起來你正試圖利用你的toggleList()函數一次顯示一個dog-breed。 但是，listOpen值在所有狗之間共享，因此最終會打開所有列表。 沒有傳遞唯一值來確定選擇了哪只狗。

我有2種方法可以解決這個問題。

選項1）在DogList組件中添加一個名為selectedDog的額外狀態值。 更新你的toggleList函數以獲取dog品種值，我們將使用它來更新selectedDog狀態。 現在，為了顯示一個狗列表，listOpen必須為true，且且selectedDog必須與dog.breedName匹配：

import React from "react";
class DogList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      listOpen: false,
      headerTitle: this.props.title,
      selectedDog: null
    };
  }

  toggleList(dogBreed) {
    this.setState(prevState => ({
      listOpen: !prevState.listOpen,
      selectedDog: dogBreed
    }));
  }

  render() {
    const { breedInfo } = this.props;
    const { listOpen, headerTitle, selectedDog } = this.state;

    return (
      <div>
        <div>{headerTitle}</div>
        {
          <ul>
            {breedInfo.map(dog => (
              <li key={dog.id} onClick={() => this.toggleList(dog.breedName)}>
                {dog.breedName}
                {listOpen && selectedDog === dog.breedName && (
                  <ul>
                    <img src={dog.image} />
                    <li key={dog.id}>
                      {dog.colors.map(color => (
                        <ul>
                          <li>{color}</li>
                        </ul>
                      ))}
                    </li>
                  </ul>
                )}
              </li>
            ))}
          </ul>
        }
      </div>
    );
  }
}

export default DogList;

選項2）將每只狗分成不同的組成部分。 我將使用名為DogBreed的組件顯示它。 這樣做有很多好處，包括編寫更清潔的代碼，給每只狗提供自己的狀態，讓我們更好地控制每條狗。

DogBreed組件：

import React from "react";

class DogBreed extends React.Component {
  state = {
    show: false
  };

  handleClick = () => {
    this.setState(prevState => {
      return {
        show: !prevState.show
      };
    });
  };
  render() {
    const { show } = this.state;
    return (
      <li onClick={this.handleClick}>
        {this.props.breedName}
        {show ? (
          <ul>
            <img src={this.props.image} />
            <li>
              {this.props.colors.map(color => (
                <ul>
                  <li>{color}</li>
                </ul>
              ))}
            </li>
          </ul>
        ) : null}
      </li>
    );
  }
}

export default DogBreed;

更新的DogList組件：

import React from "react";
import DogBreed from "./DogBreed";

class DogList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      headerTitle: this.props.title
    };
  }

  toggleList() {
    this.setState(prevState => ({
      listOpen: !prevState.listOpen
    }));
  }

  render() {
    const { breedInfo } = this.props;
    const { headerTitle } = this.state;

    return (
      <div>
        <div>{headerTitle}</div>
        {
          <ul>
            {breedInfo.map(dog => (
              <DogBreed
                breedName={dog.breedName}
                colors={dog.colors}
                image={dog.image}
              />
            ))}
          </ul>
        }
      </div>
    );
  }
}

export default DogList;

如果您有任何疑問，請告訴我。 作為參考，以下是兩個選項的代碼框：

選項1： https ： //codesandbox.io/s/1x82qq82j

選項2： https ： //codesandbox.io/s/v3062w69v0