react 方法未定义_reactjs:typeerror:无法读取未定义的属性“name”

使用ReaTjs、ReDux和FiStury时,在创建新记录时会出错。但是,我不明白原因,因为我在redux中正确地获得了更新的信息,但是在创建记录并返回以查看所有记录之后,我得到了错误:

类型错误:无法读取未定义的属性“name”

如果我访问可视化的记录,一切都很好,问题是当我生成一个新的记录并返回可视化所有。

我的json响应如下:

1:

data: {email: "mail@hotmail.com", lastName: "Asdasd", name: "Oscar"}

uid: "2ts2DopIoXoiMVJ6lMKi"

当我返回以获取所有记录并执行console.log(this.props.clients)时,返回:

0:DocumentReference

firestore:

Firestore {_queue: AsyncQueue, INTERNAL: {â¦}, _config: FirestoreConfig, _databaseId: DatabaseId, _dataConverter: UserDataConverter, â¦}

id:(...)

parent:(...)

path:(...)

_firestoreClient:FirestoreClient {platform: BrowserPlatform, databaseInfo: DatabaseInfo, credentials: FirebaseCredentialsProvider, asyncQueue: AsyncQueue, clientId: "BGuRUAvN7ZQxmmNEZmbx", â¦}

_key:DocumentKey {path: ResourcePath}

__proto__:Object

这是我的代码:

行动:

从FiSt店获取数据

export const getFromFirestore= () => async dispatch => {

let res = [];

await db.collection('users').get().then((snapShot) => {

snapShot.docs.map( doc => {

res.push({ uid: doc.id, data: doc.data()});

})

}, error => {

console.log(error)

});

dispatch({

type: GET_CLIENTS,

payload:res

});

}

Reducer:

case GET_CLIENTS:

return{

...state,

clientsFirestore: action.payload

};

客户端组件

显示来自FireStore的数据:

class Clients extends Component {

componentDidMount(){

this.props.getFromFirestore();

};

deleteClient = (id) => {

this.props.deleteFirestore(id);

}

render() {

const { clients } = this.props;

return (

Clients

NameLast NameEmailEditDelete

{clients && clients !== undefined ? clients.map((client, key) => (

key={key}

id={client.uid}

name={client.data.name}

lastName={client.data.lastName}

email={client.data.email }

deleteClient={this.deleteClient}

/>

)): null }

);

}

}

Clients.propTypes = {

clients: PropTypes.array.isRequired,

}

const mapStateToProps = (state) => ({

clients: state.clients.clientsFirestore

});

export default connect( mapStateToProps, { getFromFirestore, deleteFirestore } )(Clients);

谢谢!