Reactjs setState won'；Don’我不在手电筒里工作

我的setState不符合handleClick事件处理程序中的状态。 我确信handleClick可以工作，因为它记录参数。
我是个新手，所以我一定忽略了什么。 这是否意味着我的handleClick函数有问题

任何建议都将不胜感激

    import React from 'react';
    import './Projects.css';
    import Footer from '../../Components/Footer/Footer.js';
    import ProjectPage from 
      '../../Components/ProjectPage/ProjectPage.js';
    import { Redirect, Link } from 'react-router-dom';

    class Projects extends React.Component {
      constructor(props) {
        super(props);
        this.state= {
          title: "kaufmann house",
          content: "charles",
        }
        this.getImages = this.getImages.bind(this);
      }

      getImages() {
        var VisibilitySensor = require('react-visibility-sensor');
        return this.props.projectList.map((post,index) =>
       <div>
          <div className="projects">
            <VisibilitySensor onChange={isVisible => 
              this._onChange(isVisible, post.title)}>
              <img key={post.id} src={post.featureImage} 
                className='projectImage' alt='projectImage' onClick= . 
                {this.handleClick.bind(this, post.content)}/>
            </VisibilitySensor>
          </div>
        </div>
        )
      }

      _onChange = (isVisible, param) => {
        isVisible && this.setState({title: param});
      };

      handleClick = (param) => {
        console.log(param);
        this.setState({content: param});
      };

      render() {

        return (
           <div>
            <Link to={{pathname: `/ProjectPage/${this.state.title}`,
                state: {
                  info: `${this.state.content}`}
                }}>{this.getImages()}</Link>
            <Link to={{pathname: `/ProjectPage/${this.state.title}`,
                state: {
                  info: `${this.state.content}`}
                }}>
              <Footer title={this.state.title}/>
             </Link>
          </div>
        )
       }
    }



    export default Projects;

从“React”导入React；
导入“/Projects.css”；
从“../../Components/Footer/Footer.js”导入页脚；
从导入项目页面
“../../Components/ProjectPage/ProjectPage.js”；
从“react router dom”导入{重定向，链接}；
类项目扩展了React.Component{
建造师（道具）{
超级（道具）；
此。状态={
标题：“考夫曼之家”，
内容：“查尔斯”，
}
this.getImages=this.getImages.bind（this）；
}
getImages（）{
var VisibilitySensor=require（'react-visibility-sensor'）；
返回此.props.projectList.map（（帖子，索引）=>
这个。_onChange（isVisible，post.title）}>
)
}
_onChange=（isVisible，param）=>{
isVisible&&this.setState（{title:param}）；
};
handleClick=（参数）=>{
控制台日志（param）；
this.setState（{content:param}）；
};
render（）{
返回(
{this.getImages（）}
)
}
}
导出默认项目；

您的

状态

包含标题和内容。您必须

setState

如下所示。否则，新的

状态

将无法正确更新，因为您替换了整个

状态

对象

  _onChange = (isVisible, param) => {
    isVisible && this.setState({
       ...this.state,
       title: param
     });
  };

  handleClick = (param) => {
    console.log(param);
    this.setState({ 
       ...this.state,
       content: param
    });
  };

---

我建议作出以下修改：

1） 移动var VisibilitySensor=require（'react-visibility-sensor'）； 以保持组件的清洁

import React from 'react';
import './Projects.css';
import Footer from '../../Components/Footer/Footer.js';
import ProjectPage from 
      '../../Components/ProjectPage/ProjectPage.js';
import { Redirect, Link } from 'react-router-dom';
import VisibilitySensor from 'react-visibility-sensor';

2） 关于单击处理程序，使用bind创建处理程序函数是一种不好的做法，因为这可能会导致性能问题，因为将在每个渲染上创建一个新函数。您可以使用箭头函数并设置数据-[属性] 向组件添加数据的步骤

getImages() {
  //var VisibilitySensor = require('react-visibility-sensor'); remove this line
  return this.props.projectList.map((post,index) => (
     <div key={post.id}>
       <div className="projects">
         <VisibilitySensor onChange={isVisible => 
          this._onChange(isVisible, post.title)}>
           <img src={post.featureImage}
              data-content={post.content}
              className='projectImage' 
              alt='projectImage' 
              onClick={this.handleClick}/>
         </VisibilitySensor>
       </div>
     </div>
  ))
}


handleClick = (e) => {
    var content = e.target.dataset.content;
    this.setState((state) => ({
       ...state,
       content
    }))
  }

getImages（）{
//var VisibilitySensor=require（'react-visibility-sensor'）；删除此行
返回此.props.projectList.map（（帖子，索引）=>(
这个。_onChange（isVisible，post.title）}>
))
}
handleClick=（e）=>{
var content=e.target.dataset.content；
this.setState（（状态）=>({
……国家，
内容
}))
}

感谢@AngelSalazar为我指出了更好的代码结构方法。我做了你建议的改变。只有问题仍然存在。handleClick arrow函数中的setState不会更新状态。但每当我在handleClick函数中记录内容时，它都会记录post.content数据。知道有什么问题吗？

getImages() {
  //var VisibilitySensor = require('react-visibility-sensor'); remove this line
  return this.props.projectList.map((post,index) => (
     <div key={post.id}>
       <div className="projects">
         <VisibilitySensor onChange={isVisible => 
          this._onChange(isVisible, post.title)}>
           <img src={post.featureImage}
              data-content={post.content}
              className='projectImage' 
              alt='projectImage' 
              onClick={this.handleClick}/>
         </VisibilitySensor>
       </div>
     </div>
  ))
}


handleClick = (e) => {
    var content = e.target.dataset.content;
    this.setState((state) => ({
       ...state,
       content
    }))
  }