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 
    })
}