无法在antd表上显示API的JSON数据

时间:2018-06-13 15:33:48

标签: reactjs redux-saga antd

我的父组件是:

=SUM(--(FREQUENCY(IF($B$2:$B$10=D1,MATCH($A$2:$A$10,$A$2:$A$10,0)),ROW($A$2:$A$10)-ROW($A$2)+1)>0))

我在安装数据时会获取数据,但是当我尝试使用数据道具设置数据状态时。它说data.slice不是一个函数。

//佐贺

constructor(){
  super();
  this.state = {data: []}
}
componentWillMount(){
  this.props.getData(); //makes api call
  this.setState({data: this.props.data}); //get data stored in the store
}
render(){
  const columns ={ //columns here}
  return(
    <Tables
      dataSource = {this.state.data}
      columns = {this.columns}
    />
  )
}

const mapStateToProps = state => ({
  data: state.data,
})
const mapDispatchToProps = dispatch => ({
  getData: () => dispatch(getData()),
})

//动作

export function* getData(action){
  try{
  const data = yield call(axios.get, 'http://localhost:4000/data');
  console.log(data);
  if (data) {
    yield put(updateData(data.data));
  }catch(e){
    console.log(e);
  }
}

//减速器

export const updateData = data => ({
  type: UPDATE_DATA,
  data
});

我不知道在设置状态时我做错了什么。我似乎无法找出错误。

请帮帮我

1 个答案:

答案 0 :(得分:0)

tf.layers

数据还没有出现。如果确实想要将状态设置为使用道具数据,则需要在this.setState({data: this.props.data}); //get data stored in the store生命周期功能中更新您的状态,而不是componentWillReceiveProps(nextProps)

分析此功能

componentDidMount()

当你致电componentWillMount(){ this.props.getData(); //makes api call this.setState({data: this.props.data}); //get data stored in the store }时,浏览器会做它的事情,你的redux状态最终会更新 ,因此,当调用第二行时,数据还没有。

你可以使用一些承诺和/或getData()函数,但你真的不需要。您可以使用常规组件生命周期功能,事实上,您可以使用async/await并且根本没有内部状态。