reactjs-在循环.map上显示div悬停

Question

设置一个简单的数组后，我想在鼠标悬停时显示一个div，然后按此reactjs - Render single icon on hover for list item rendered from array 但是没有用，我试过使用prevState而不是使用state等。

所以，请问有谁能提供一些提示吗？

  class Posts extends Component {
  constructor(props) {
    super(props);

    this.state = {
      posts: [],

      isHovered: {}
    };
  }

  handleMouseEnter = index => {
    this.setState(prevState => {
      return { isHovered: { ...prevState.isHovered, [index]: true } };
    });
  };

  handleMouseLeave = index => {
    this.setState(prevState => {
      return { isHovered: { ...prevState.isHovered, [index]: false } };
    });
  };

  render() {
    const { isHovering, isHovered } = this.state;

    const posts = this.state.posts.map((post, index) => {
      return (
        <div>
          <div
            key={index}
            onMouseEnter={() => this.handleMouseEnter(index)}
            onMouseLeave={() => this.handleMouseLeave(index)}
            isHovering={isHovered[index]}
          >
            <div>
              <p>{post.title}</p>
              {this.state.isHovering && <div>Hovering right meow! ?</div>}
            </div>
          </div>
        </div>
      );
    });
    return <div>{posts}</div>;
  }
}