вывод асинхронных данных react-redux

148

23 мая 2019, 22:40

Всем привет. Имею компонент Notes

 class Notes extends Component {
 componentDidMount(){
    this.props.axiosNotes(); //получаю данные с сервера 
}
render(){
    const notes = this.props.notes;
    console.log(notes); //у момент создания компонента = {}, после 
                        //срабатывания axiosNotes = {0: {…}, 1: {…}, 2: {…}, 
                        //  3: {…}, 4: {…}}
    return(
        <div>
            {notes.map(i => <p>{i.title}</p>), 2000)} //map is not a function
        </div>
    )
 }
}
const mapStateToProps = state => ({
notes: state.notes
});
const mapDispatchToProps = {
axiosNotes
};
export default connect(mapStateToProps,mapDispatchToProps)(Notes);

Вообщем, так как я получаю данные асинхронно, мой пропс notes сначала пустой объект, а метод map не может итерироваться по пустому объекту. Вопрос, как мне вывести данные this.props.notes не у момент создания компонента, а когда пришли асинхронные данные, т.е. когда notes.length > 0

Answer 1

Можно проверять через jsx тернарник на наличие данных и в случае, если данные существуют (пришли, были получены), то рендерить необходимую часть компонентов. В примере показано как мы получаем данные (имитируя запрос в 3 секунды), после чего наш state получает данные и страница рендерит их:

const { Component } = React; 
 
const dataToReceive = [ 
	{ 
		name: 'John', 
		skill: 'HTML' 
	}, 
	{ 
		name: 'Bill', 
	 	skill: 'Javascript' 
	} 
] 
 
class App extends Component { 
	constructor() { 
		super(); 
		this.state = { 
			data: null, 
		} 
	} 
   
	componentDidMount() { 
		this.requestData(dataToReceive) 
	} 
   
	requestData(data) {	 
		new Promise((res, rej) => { 
			setTimeout(() => { 
				res(data); 
		 	 }, 3000);		 
		}) 
		.then(result => { 
			this.setState({ 
				data: result, 
			}) 
		}) 
	} 
	render() { 
		return ( 
			<div> 
				{ !this.state.data &&  
					<div>Data is loading...</div> 
				} 
				{ this.state.data && 
					<div> 
						<div>Data successfully loaded</div> 
						 
						{this.state.data.map(item => { 
							return ( 
								<div>Name: {item.name}</div> 
							) 
						})} 
					</div> 
				} 
			</div> 
		) 
	} 
} 
 
ReactDOM.render(<App />, document.querySelector('#root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 
 
<div id="root"></div>