setState在handleClick中不起作用

时间:2018-07-05 15:06:33

标签: reactjs setstate

我的setState不会在handleClick事件处理程序中获得该状态。 我确定handleClick可以正常工作,因为它记录了参数。
我对React很陌生,所以我必须忽略一些东西。 这是否意味着我的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;

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

我建议进行以下更改:

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