onClick喜歡按鈕喜歡陣列ReactJS中的所有物件

我是 web 開發的超級新手，但我正在嘗試在 react js 中為火星探測器影像的 API 陣列實作一個類似的按鈕。我遇到的問題是，當我單擊我的一張影像的點贊按鈕時，所有點贊按鈕都會單擊。我已經嘗試為我的按鈕使用 id、classNames 和鍵，但似乎沒有任何效果。任何幫助，將不勝感激 ：）

class Rover extends React.Component {
  state = {
      loading: true,
      images: [],
  };

  async componentDidMount() {
      const url = 'https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&page=2&api_key='
      const response = await fetch(url);
      const data= await response.json();
      this.setState({ images: data.photos, loading: false });
      console.log(this.state);
  }

  render() {
      if (this.state.loading) {
          return <div>loading...</div>;
      }
      if (!this.state.images) {
          return <div>didn't find image</div>
      }

        return (
          <IconContext.Provider value={{ color: '#a9b3c1', size: 64 }}>
            <RoverSection>
              <RoverWrapper>
                <RoverHeading>Mars Rover</RoverHeading>
                <div>
                    {this.state.images.map((image, idx) => (
                    <div className={`some-image-${idx}`} key={`some-image${idx}`}>
                      <RoverContainer>
                          <RoverCard to='/'>
                            <RoverCardInfo>
                              <RoverCardID>Photo ID: {image.id}</RoverCardID>
                              <RoverCardFeatures>
                                <Img src={image.img_src} />
                                <RoverCardFeature>{image.rover.name} Rover</RoverCardFeature>
                                <RoverCardFeature>{image.camera.full_name}</RoverCardFeature>
                                <RoverCardFeature>{image.earth_date}</RoverCardFeature>
                              </RoverCardFeatures>
                              <Button primary id={image.id} className={`some-button-${idx}`} onClick={() => {
                                this.setState({
                                  isLiked: !this.state.isLiked
                                })
                              }}>{this.state.isLiked ? <FaHeart/> : <FaRegHeart/>}</Button>
                            </RoverCardInfo>
                          </RoverCard>
                        </RoverContainer>
                      </div>
                    ))}
                   </div>
                </RoverWrapper>
              </RoverSection>
            </IconContext.Provider>
        );
      }
    }

export default Rover

uj5u.com熱心網友回復：

您正在映射所有影像（您有一組影像）；但是，您沒有喜歡的陣列，您只有一個布林值。您需要為您喜歡的大小與影像陣列相同的陣列創建一個陣列，然后使用相同的索引（您可以在地圖中獲取當前索引（您已經將其命名為 idx））

您最初的類似狀態應類似于：

 async componentDidMount() {
      const url = 'https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&page=2&api_key='
      const response = await fetch(url);
      const data= await response.json();
      this.setState({ images: data.photos, isLiked:new Array(data.photos.length).fill(false), loading: false });
      console.log(this.state);
  }

然后在你的組件中

this.setState((current)=>{
  const newState={...current};
  const isLiked = newState.isLiked;
  isLiked[idx] = !isLiked[idx];
  return {
    ...newState,
    isLiked:[...isLiked]
  }
})

和

{this.state.isLiked[idx] ? <FaHeart/> : <FaRegHeart/>}

uj5u.com熱心網友回復：

假設這是您的影像陣列：

this.state.images = [{id : 0, img : "img1"} ,{id : 1 , img : "img2"} ,{id : 2, img : "img3"}  ]

現在說你想喜歡 img1 ，當你在 img1 上點擊喜歡時，你不認為你只需要將 img1 保存為喜歡的影像。您可以通過修改影像陣列物件來做到這一點。如果您不想更改原始影像物件中的資料，您可以保留另一個帶有 id 及其類似狀態的陣列/物件映射（您可以保留所有或只能推送喜歡的。

現在，當您單擊影像上的任何類似按鈕時，呼叫該函式（也在建構式中系結它）

onClick = {(e)=> {this.handleLikeClick(image)}}

并在函式 handleLikeClick

handleLikeClick(image){
    let copyImages = [...this.state.images]
    this.state.images.forEach((img) => {
         if(img.id === image.id) {
            img.liked= !img.liked;
         }
    });
    this.setState({
       images :copyImages 
    })
}

現在，無論何時在 render 中，您都可以檢查 image 物件中的 like 屬性，而不僅僅是檢查 isLIked。

標籤：

上一篇：如何在nextjs中獲取子組件？

下一篇：單擊時如何更改按鈕的圖示，按鈕已具有單擊事件