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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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