react-trello
react-trello copied to clipboard
Axios and Cards bug
Describe the bug
Hi im using your component to display a board from an API, this API use Github API to get the board data. So i can display columns but cards appear only when i move columns and when i try to move cards i get this error message: Uncaught TypeError: Cannot read property 'laneId' of null.
Please i need your help
https://developer.github.com/v3/projects/columns/ https://developer.github.com/v3/projects/cards/
To Reproduce
import React,{Component} from "react";
import Board from 'react-trello'
import axios from "axios";
export default class Kanban extends Component {
constructor(props) {
super(props);
this.state = {
board: {lanes:[]}
}
}
componentDidMount() {
this.get_column()
}
get_column = () =>{
let user_id = localStorage.getItem('UserId');
// console.log(res.data);
if(this.props.match) {
const {match: {params}} = this.props;
/* console.log(params.id);*/
axios.get('http://localhost:8000/'+ user_id +'/projects/'+ params.id+'/projects', {headers: {'Authorization': `${localStorage.getItem('UserToken')}`}}).then( (response) => {
const data_elem = [];
response.data.map( (elem) =>{
//console.log(elem.id);
axios.get('http://localhost:8000/'+ user_id +'/projects/columns/'+elem.id+'/cards', {headers: {'Authorization': `${localStorage.getItem('UserToken')}`}}).then((res) => {
// console.log(res.data);
if(res.data.length > 0){
elem['cards'] = res.data;
}
});
data_elem.push(elem);
});
if(data_elem.length > 0){
this.setState({board:{lanes: data_elem}})
}
});
}
}
render() {
if(this.state.board.lanes.length > 0 ) {console.log(this.state.board)}
return (<div>
{this.state.board.lanes.length > 0 ? <Board data={this.state.board} draggable/>: <p>Loading...</p>}
</div>)
}
}