首页 文章

Reactjs setState无法正常工作

提问于
浏览 次
0

我遇到了一个问题，我的控制台告诉我setState不是defind . 我不确定我做错了什么 . 我在构造函数中预加载了我的对象（数据） . 然后我将它传递给一个显示它的表 . 当用户从下拉列表中选择一个选项时，它应该只显示过滤后的数据 . 我已经在构造函数中绑定了函数，所以我不确定我做错了什么 . 代码如下：

import React, {Component} from ‘react’;
import moment from ‘moment’;
import {Table} from ‘reactstrap’;
import classnames from ‘classnames’;

class Tasks extends Component {


  constructor(props){

    super(props);

    this.state = {

         data: [
        {
          “task_number”:””,
          “work_end”:”10/01/2017”
        },
        {
        etc…
        }
         ]

    }

    this.checkDate = this.checkDate.bind(this);
  }


   checkDate(e) {
    let d = moment.format(“MM/DD/YYYY”);
    let currentData = this.state.data;

    currentData.filter(function(newData){
       if(newData.work_end < d){

         //comes back as undefined
         this.setState({data: newData});
       }
    });
   }

  render(){
    const { data } = this.state;


    let myData = data.map((header, i){
    return (<tr key = {i}>
          <td>{data[i].task_number}</td>
         <td>{data[i].work_end}</td>
                     </tr>)
    });

    return(
        <div>
            <table>
                {myData}
            </table>

        <Input type=“select”
                           name=“assigngroup”
             id=“assigngroup”
            value={this.state.value}
            onChange={this.checkDate}
            />
        </div>
    );
  }


}

export default Tasks;

我也尝试过创建一个新函数并从checkDate传递它，但也失败了 .

reactjs setstate

2 回答

  • 1

    在Javascript中，函数有自己的作用域，所以在 checkDate this 是您的组件，但是，在用于过滤 currentData 的函数内部， this 是其他内容 .

    你的代码应该是这样的：

    currentData.filter(newData => {
   if(newData.work_end < d){

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

    或者只是在变量中保存 this ：

    var self = this;

currentData.filter(function(newData){
   if(newData.work_end < d){

     self.setState({data: newData});
   }
});
    回复于
  • 1

    filter 方法返回一个新的过滤数组 .

    试试这个：

    checkDate(e) {
  let d = moment().format(“MM/DD/YYYY”)
  let currentData = this.state.data
  let filteredData = currentData.filter(item => item.work_end < d)

  this.setState({ data: filteredData })
}
    回复于

相关问题