ReactJS：切り替えられたリストアイテム内の画像を非表示/再表示する方法

レコードを一覧表示し、<button>要素を介してレコードを切り替え（非表示と非表示）できるようにするReactコンポーネントを実装しました。

次に、各リストアイテムにある個別のスイッチ/ボタンを使用して、各リストアイテムの画像を切り替え/非表示/再表示する必要があります。

私は現在、リストアイテムごとに画像の表示を切り替えるために次のコードを持っています：

  hideUnhidePhoto(id) {
    const newData = this.state.data.map(item => {
      if(item.id === id) {
        return { ...item, photoVisible: !item.photoVisible};
      }

      return item;
    })

    this.setState({
      data: newData
    });
  }

そして、<a>クリックイベントを介して画像の表示を制御できるようにするこのアンカー要素があります。

<a style={{color: 'red'}} onClick={this.hideUnhidePhoto.bind(this, post.id)}>
Hide/Unhide Photo
</a>

問題：

私の問題は、写真だけの表示を切り替えるのではなく、[写真の非表示/再表示]ボタンをクリックするたびに、このボタンをクリックするとリスト内のすべてのアイテムが非表示になることです。

私の試み：

import React, { Component, Fragment } from "react";
import { render } from "react-dom";


class Focus extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      shown: true,
    };
  }

  componentDidMount() {
    this.setState({
      data: [
        { id: "1", title: "my first title", image: "http://localhost/1.png", visible: true , photoVisible: true},
        { id: "2", title: "my second title", image: "http://localhost/2.png", visible: true, photoVisible: true},
        { id: "3", title: "my third title", image: "http://localhost/3.png", visible: true, photoVisible: true}
      ]
    });
  }


  toggle(id) {
    const newData = this.state.data.map(item => {
      if(item.id === id) {
        return { ...item, visible: !item.visible};
      }

      return item;
    })

    this.setState({
      data: newData
    });
  }





  hideUnhidePhoto(id) {
    const newData = this.state.data.map(item => {
      if(item.id === id) {
        return { ...item, photoVisible: !item.photoVisible};
      }

      return item;
    })

    this.setState({
      data: newData
    });
  }


  render() {
    return (
      <div>
        <label>
          <ul>
            {this.state.data.map((post, i) => (
              <li key={i}>
                <div style={{ display: post.visible ? "none" : "block"}}> 

<b>Post Data:</b> {post.title} --{post.id}   <br />

<a style={{color: 'red'}} onClick={this.hideUnhidePhoto.bind(this, post.id)}> Hide/Unhide Photo </a><br />

<div style={{ display: post.visible1 ? "none" : "block"}}> 

<img src={post.image} />

</div>

</div>
                <button onClick={this.toggle.bind(this, post.id)}>Toggle ({post.id}) </button>
                <br />
              </li>
            ))}
          </ul>
        </label>
      </div>
    );
  }
}

私があなたの質問を正しく理解しているなら、あなたのレンダリング関数にいくつかの小さな間違いがあるように見えます、すなわちこれ：

style={{ display: post.visible1 ? "none" : "block"}}

私が見ることができることからvisible1、あなたのpostアイテムにはフィールドがありません。それはあなたの画像の切り替えに予期しない振る舞いを引き起こします。以下render()のコメントで詳細に関数を改訂することを検討してください。

render() {
return (
  <div>
    <label>
      <ul>
        {this.state.data.map((post, i) => (
          <li key={i}>
            <div style={{ display: post.visible ? "none" : "block"}}> 
                <b>Post Data:</b> {post.title} -- {post.id}   <br />

                { /* Revise event handler binding with arrow function as shown. 
                Also consider a change from <a> to something like <span> to ensure 
                no default click behavour on <a> happens if href were added */ }
                <span style={{color: 'red'}} 
                      onClick={ () => this.hideUnhidePhoto(post.id) }>
                Hide/Unhide Photo
                </span>

                <br />

                {/* Update image display to be controlled via post.photoVisible 
                field */ }
                <div style={{ display: post.photoVisible ? "block" : "none"}}> 
                    <img src={post.image} />
                </div>
            </div>
            { /* I prefer to use arrow functions in general to make the code 
            a little more readable */ }
            <button onMouseDown={ () => this.toggle(post.id) }>Toggle ({post.id}) </button>
            <br />
          </li>
        ))}
      </ul>
    </label>
  </div>
);
}

また、hideUnhidePhoto()このようにメソッドを修正して、eveyのマップされたデータが確実にitem複製されるようにすることを検討してください。

hideUnhidePhoto(id) {

    this.setState(({ data }) => {
        return { 
            data : data.map(item => ({ 
            ...item, 
            photoVisible : (id == item.id) ? !item.photoVisible : item.photoVisible }))
        }
    });
}

更新

これが解決策を示す実用的なJSFiddleです。 https://jsfiddle.net/Lvyw5u4q/1/

お役に立てば幸いです