Моя база данных генерирует эти данные json
[{"id":"1","firstName":"jmarkatti"}]
Этот код реагирует с избыточностью отображает записи с использованием метода отображения, и он отлично работает.
Теперь у меня есть требования котобразить запись без метода сопоставления с этим эффектом, в функции рендеринга, я попытался
любой из следующего кода ниже
Name: {pgs1.items1.firstName} <br />
Name: {pg1.items1[0].firstName} <br />
Name: {this.props.pgs1.items1.firstName} <br />
, но он сохраняет ошибку воспроизведения dsiplaying: Ошибка чтениясвойство 'firstName' не определено в Recording1.render
В Reactjs , я могу просто сделать что-то вроде
Name: {this.state.rec[0].firstName} <br />
, но в реагировать избыточно, показывает ошибку, упомянутую выше
здесь основной React Redux код
import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { uActions } from '../actions';
class Recording1 extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
this.props=this.props.dispatch(userActions.getAll_Rec());
}
render() {
const { pg1, pgs1 } = this.props;
return (
<div>
{pgs1.items1 &&
<ul>
// display record with mapping metthod
{pgs1.items1.map((pg1, i) =>
<li key={pg1.id}>
Name: {pg1.firstName} <br />
</li>
)}
</ul>
}
<div>
// display records without mapping method
//Name: {pgs1.items1.firstName} <br />
//Name: {pg1.items1.firstName} <br />
//Name: {this.props.pgs1.items1.firstName} <br />
</div>
</div>
);
}
}
function mapStateToProps(state) {
const { pgs1} = state;
const { pg1 } = state;
return {
pg1,
pgs1
};
}
const connectedRecording1 = connect(mapStateToProps)(Recording1);
export { connectedRecording1 as Recording1 };
здесь Redux Reducer
export function pgs1(state = {}, action) {
switch (action.type) {
case userConstants.GETALL_REQUEST:
return {
...state,
loading: true
};
case userConstants.GETALL_SUCCESS:
return {
loading: false,
error: null,
items1: action.pgs1
};
Обновление
Сервис API Call
function getAll_Rec(us) {
const req = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({us})
};
return fetch(`record.php`, req).then(handleResponse)
.then(pg1 => {
if (pg1) {
console.log(pg1);
}
return pg1;
});
}