Я работаю над проектом реагирования / избыточности, который использует axios для получения данных, но некоторые данные по какой-то причине недоступны с использованием точечной нотации.
Например, это просто отлично вытягивает данные:
console.log(this.props.apts.data)
в то время как это возвращает TypeError: Невозможно прочитать свойство 'apartments' из неопределенного:
console.log(this.props.apts.data.apartments)
Я точно знаю, что есть данные. Это происходит и в других частях файла, а не только в этом конкретном массиве объектов.
Вот один из файлов JSON, с которыми я работаю: https://api.myjson.com/bins/x2ad4
Это мой создатель действий:
export const fetchPosts = () => {
return async dispatch => {
const response = await jsonPlaceholder.get('https://api.myjson.com/bins/x2ad4');
dispatch({ type: 'FETCH_POSTS', payload: response })
}
}
Если я изменю полезную нагрузку на response.data.apartments, я смогу получить доступ к массиву квартир в моем компоненте следующим образом:
class PostList extends Component {
componentDidMount() {
this.props.fetchPosts();
}
formatPricing(price) {
if(this.props.apts[0].pricing.currency === 'EUR') {
return `${price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")} €`;
} else {
return `£${price}`
}
}
renderList() {
return this.props.apts.map(apartment => {
return (
<Grid key={apartment._id} item lg={4} md={6} xs={12}>
<div>
<img style={{objectFit: 'cover'}} src={apartment.images.photos[0].path} alt="" width='100%' height="150px"/>
<div className="containeraps">
<div className='aptprice'>{this.formatPricing(apartment.pricing.price)}</div>
<div className="monthutil">
<div>Per Month</div>
<div>Utilities incl.</div>
</div>
</div>
<div className="movein">
from 29.24.2019 - {parseInt(apartment.details.squareMeters)} m² - {apartment.bedroomCount} bedroom
</div>
</div>
</Grid>
)
})
}
render() {
return (
<div className='aptlist'>
<Grid container spacing={24}>
{this.renderList()}
</Grid>
</div>
);
}
}
const mapStateToProps = (state) => {
return { apts: state.PostsReducer }
}
export default connect(mapStateToProps,
{fetchPosts}
)(PostList);
Но если я просто использую ответ в качестве полезной нагрузки, я не смогу получить доступ к массиву квартир, потому что 'return this.props.apts.data.apartments.map (apartment =>' дает мне свойство TypeError: Cannot read свойство «квартиры» неопределенных.
К сожалению, мне нужны данные только из ответа, поэтому у меня нет обходного пути.
Это мой редуктор:
export default (state = [], action) => {
switch(action.type) {
case 'FETCH_POSTS':
return action.payload;
default:
return state;
}
}
Сначала я думал, что это связано с отсутствием загрузки данных, но, поскольку некоторые данные присутствуют, все они должны быть доступны. Это то, что озадачивает меня сейчас, почему доступны только некоторые данные, а некоторые нет.
Я изменил способ обращения к данным, используя точечные обозначения в разных файлах, чтобы изменить способ их извлечения, но пока есть только 1 способ получить доступ к массиву квартир. Сумасшедшая вещь в том, что я могу console.log это, даже когда это не работает, и я вижу данные в консоли.
Обновление: я не могу обновить что-либо более чем на 2 вызова с использованием точечной нотации. Таким образом props.apts.queryParams возвращает информацию, но использование точечной нотации для получения чего-либо внутри queryParams также не работает.
А для массива квартир я не могу просмотреть какие-либо уникальные индексы этого массива. Таким образом, props.apts.apartments отображает массив данных, а props.apts.apartments [0] вообще не отображает никаких данных. Я попытался использовать операторы спреда, чтобы исправить это, но я не смог найти решение.