Question

我遇到了一个问题，我的控制台告诉我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传递它，但也失败了。

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

Answer 2

过滤器方法返回一个新的过滤数组。

试试这个：

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

Reactjs setState无效

2 个答案: