Javascript 将过滤后的值传递给react render（）

我使用react datagrid表示我的documents表，但我不知道如何用完整数据实例化render（）作用域。它总是在没有数据的情况下实例化

这是我的数据网格

'use strict';

 var React    = require('react')
 var DataGrid = require('react-datagrid')


 var columns = [
     { name: 'id', title: '#', width: 50 },
     { name: 'business_id', flex: 1 },
     { name: 'lastName'  },
     { name: 'city', flex: 1 },
     { name: 'country', flex: 1 },
     { name: 'email', width: 200 }
  ]

  var App = React.createClass({

    initData: function(documents){
        if(documents){
            return documents;
        } else {
            console.log('documents: '+ this.props.documents);
            return this.props.documents;
        }
    },
    getInitialState: function(){
        return {
            dataSource: [],
        }
    },
    componentDidMount() {
        this.setState({
            dataSource: this.initData()
        })
    },
    render: function(){
      console.log('this.props.documents: '+ this.props.documents)
      return <DataGrid
        idProperty='id'
        dataSource={this.initData()}
        columns={columns}
        style={{height: 400}}

        onFilter={this.handleFilter}
        liveFilter={true} //to apply the filter while typing
     />
    },

   handleFilter: function(column, value, allFilterValues){
    //reset data to original data-array
    var data = this.initData()

    //go over all filters and apply them
    Object.keys(allFilterValues).forEach(function(name){
        var columnFilter = (allFilterValues[name] + '').toUpperCase()

        if (columnFilter == ''){
            return
        }

        data = data.filter(function(item){
            if ((item[name] + '').toUpperCase().indexOf(columnFilter) === 0){
                return true
            }
        })

      })
      this.initData(data)
      this.setState({})
    }
   })

“严格使用”；
var React=require（'React'）
var DataGrid=require（'react-DataGrid'）
变量列=[
{名称：'id'，标题：'#'，宽度：50}，
{name:'business_id'，flex:1}，
{name:'lastName'}，
{name:'city'，flex:1}，
{name:'country'，flex:1}，
{名称：'电子邮件'，宽度：200}
]
var App=React.createClass({
initData：函数（文档）{
国际单项体育联合会（文件）{
归还文件；
}否则{
console.log（'documents:'+this.props.documents）；
返回此.props.documents；
}
},
getInitialState:函数（）{
返回{
数据源：[]，
}
},
componentDidMount（）{
这是我的国家({
数据源：this.initData（）
})
},
render:function（）{
log（'this.props.documents:'+this.props.documents）
返回
},
handleFilter:函数（列、值、所有FilterValue）{
//将数据重置为原始数据数组
var data=this.initData（）
//检查所有过滤器并应用它们
key（所有FilterValue）.forEach（函数（名称）{
var columnFilter=（allFilterValues[name]+''）.toUpperCase（）
如果（columnFilter=''）{
返回
}
data=data.filter（函数（项）{
if（（项[名称]+“”）.toUpperCase（）.indexOf（columnFilter）==0）{
返回真值
}
})
})
this.initData（数据）
this.setState（{}）
}
})

第一个控制台日志返回nothind

文件：

render（）中的控制台日志返回数据

this.props.documents:[对象对象]，[对象对象对象]，[对象对象]，[对象对象对象]，[对象对象对象]

这就是我从主组件调用datagrid组件的方式

<DocumentReactNewGrid documents={this.state.documents}/>

---

将数据源设置为

状态

。在过滤器上，将新数据设置为

状态

。这将使用新数据重新渲染组件

'use strict';

 var React    = require('react')
 var DataGrid = require('react-datagrid')


var columns = [
   { name: 'id', title: '#', width: 50 },
   { name: 'business_id', flex: 1 },
   { name: 'lastName'  },
   { name: 'city', flex: 1 },
   { name: 'country', flex: 1 },
   { name: 'email', width: 200 }
]

var App = React.createClass({
  initData: function(documents){
    if(documents){
        return documents;
    } else {
        return this.props.documents;
    }
   },
  getInitialState: function(){
    return { 
      dataSource: this.initData(),
    }
  },
  componentWillReceiveProps(nextProps) {
    this.setState({
     dataSource: nextProps.documents,
    })
  },
  render: function(){
    return <DataGrid
        idProperty='id'
        dataSource={this.state.dataSource}
        columns={columns}
        style={{height: 400}}

        onFilter={this.handleFilter}
        liveFilter={true} //to apply the filter while typing
    />
   },


   handleFilter: function(column, value, allFilterValues){
    //reset data to original data-array
    var data = this.initData()

    //go over all filters and apply them
    Object.keys(allFilterValues).forEach(function(name){
        var columnFilter = (allFilterValues[name] + '').toUpperCase()

        if (columnFilter == ''){
            return
        }

        data = data.filter(function(item){
            if ((item[name] + '').toUpperCase().indexOf(columnFilter) === 0){
                return true
            }
        })

      })
      this.setState({
        dataSource: data
      })
    }
   })

“严格使用”；
var React=require（'React'）
var DataGrid=require（'react-DataGrid'）
变量列=[
{名称：'id'，标题：'#'，宽度：50}，
{name:'business_id'，flex:1}，
{name:'lastName'}，
{name:'city'，flex:1}，
{name:'country'，flex:1}，
{名称：'电子邮件'，宽度：200}
]
var App=React.createClass({
initData：函数（文档）{
国际单项体育联合会（文件）{
归还文件；
}否则{
返回此.props.documents；
}
},
getInitialState:函数（）{
返回{
数据源：this.initData（），
}
},
组件将接收道具（下一步）{
这是我的国家({
数据源：nextrops.documents，
})
},
render:function（）{
返回
},
handleFilter:函数（列、值、所有FilterValue）{
//将数据重置为原始数据数组
var data=this.initData（）
//检查所有过滤器并应用它们
key（所有FilterValue）.forEach（函数（名称）{
var columnFilter=（allFilterValues[name]+''）.toUpperCase（）
如果（columnFilter=''）{
返回
}
data=data.filter（函数（项）{
if（（项[名称]+“”）.toUpperCase（）.indexOf（columnFilter）==0）{
返回真值
}
})
})
这是我的国家({
数据源：数据
})
}
})

---

希望这有帮助

tkx Pranesh，它只有在我过滤数据并调用handleFilter时才起作用，但起初数据网格初始化为空，我不明白为什么。@Kysersick更新了代码。您需要将

initData（）

移动到

getInitialState（）

上方。希望这能奏效！它没有修复它，当dataGrid第一次加载时，initData（）仍然不返回任何内容更新答案！现在检查。。。尝试在render中放置一个console.log（this.props.documents）并检查是否获得了道具。如果不是，你需要检查一下！我用你的代码更新了我的问题，仍然实例化为空