下面的代码在数组中有三张帖子照片。当我点击每个帖子按钮时，应该会在底部看到与每个帖子相对应的三个帖子照片 div。

我的问题：

我的问题是它只显示一个帖子照片 div，它在我添加下面的 CSS 代码后不断替换其他的。

const mainArea={
 position: 'fixed',
  width: '80%',
  bottom: '0%',
   display: 'inline-block'
}

const photodiv={
position: 'relative',
width: '250px',
  // height:auto,
  background: 'orange',
  color: 'black',
  borderRadius: '5px 5px 0px 0px',
  bottom: '0px',

}

屏幕截图显示了基于 CSS 实现的卡住的 div

我想要什么： 如果单击三个切换按钮，我需要看到三个 div 发布照片

这是主要代码

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

const mainArea={
 position: 'fixed',
  width: '80%',
  bottom: '0%',
   display: 'inline-block'
}

const photodiv={
position: 'relative',
width: '250px',
  // height:auto,
  background: 'orange',
  color: 'black',
  borderRadius: '5px 5px 0px 0px',
  bottom: '0px',

}

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/apidb_react/1.png", visible: true , photoVisible: true},
        { id: "2", title: "my second title", image: "http://localhost/apidb_react/2.png", visible: true, photoVisible: true},
        { id: "3", title: "my third title", image: "http://localhost/apidb_react/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 => {

alert(id);

      if(item.id === id) {
alert('ttto  ' +item.id);
        return { ...item, photoVisible: !item.photoVisible};
      }

      return item;
    })

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



hideUnhidePhoto(id) {

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



  render() {
    return (
      <div>
        <label>
          <ul>
            {this.state.data.map((post, i) => (
              <li key={i}>

<div style={mainArea}>
<div style={photodiv}>
                <div style={{ display: post.visible ? "none" : "block"}}> 

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

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

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

<img src={post.image} />

</div>

</div></div>
</div>
 <button onMouseDown={ () => this.toggle(post.id) }>Toggle </button><br />


                <br />
              </li>
            ))}
          </ul>
        </label>
      </div>
    );
  }







}