设置状态在句柄中不起作用单击

Question

my setState 不会在 handleClick 事件处理程序中显示状态。 我确定句柄点击有效，因为它记录了参数。
我对 React 有点陌生，所以我一定忽略了一些东西。 这是否意味着我的句柄点击功能有问题？

任何建议将不胜感激！

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;

Answer 1

this.state= {
title: "kaufmann house",
content: "charles",
}

您的state包含标题和内容。你必须像下面这样setState。否则，新state将无法正确更新，因为您替换了整个state对象。

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

Answer 2

我建议进行以下更改：

1( 移动变量可见性传感器 = require('反应可见性传感器'(; 到文件顶部以保持组件清洁

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