0

Всем привет. Имею компонент 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

2
  • Все же как обычно делается: ставим флаг в стейте, как только получаем данные - стэйт становится true. И на это изменение триггерится рендер и срабатывает функция с мапом.
    – NeedH8
    2 дек 2018 в 14:41
  • так? если да, то не работает, через тернарник тоже const mapStateToProps = state => ({ notes: state.notes && state.notes });
    – mara1esh
    2 дек 2018 в 14:45

1 ответ 1

0

Можно проверять через 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.