0
157
VistasNo se puede leer el mapa de propiedades de undefined
Por alguna razón, a veces se mapea, pero recibo otro error de no devolver nada y otras veces simplemente dice que no se puede leer el mapa de propiedades de undefined. Estoy tratando de compilar una lista de usuarios en React.
Tengo un componente llamado UserList que consulta mi base de datos para todos los usuarios y actualiza el estado:
const UserList = React.createClass({ getInitialState: function () { return { users: [] } }, componentDidMount: function () { this.loadUsersFromServer(); }, loadUsersFromServer: function () { axios.get('/api/users').then((users) => { this.setState({users: users.data.users}); }); }, render: function () { return ( <div> <h1>User List</h1> <User users={this.state.users} /> </div> ); }, });Luego lo estoy pasando a su componente secundario Usuario, y ahí es donde entra en juego el error:
const User = React.createClass({ render: function () { console.log('props: ' + JSON.stringify(this.props.users)); const users = this.props.users.map((user) => { return ( <User key={user._id} username={user.username} /> ); }); return ( <div id="users"> {users} </div> ); }, });Lo que es interesante en las herramientas de Chrome Dev es que, por alguna razón, obtengo tres registros cuando intento imprimir this.props.users, y no estoy seguro de por qué cierra la sesión de tres, pero el del medio tiene todos los usuarios. estoy buscando:
¡Cualquier ayuda sería muy apreciada!
2 Respuestas
Responde la pregunta0
Puede intentar poner la lógica de representación de los usuarios en un método de su clase UserList. Algo parecido a esto debería funcionar.
const UserList = React.createClass({ getInitialState: function () { return { users: [] } }, componentDidMount: function () { this.loadUsersFromServer(); }, loadUsersFromServer: function () { axios.get('/api/users').then((users) => { this.setState({users: users.data.users}); }); }, renderUsers: function (users) { return <div>{users.map(user => <div key={user._id} username={user.username} />)}</div> }, render: function () { return ( <div> <h1>User List</h1> { this.renderUsers(this.state.users) } </div> ); }, });0
En algún momento (segunda actualización) this.props.users parece indefinido y la función de mapa no puede manejarlo.
Reescribí el ejemplo usando la sintaxis de React.Component ya que nunca trabajé con la sintaxis de React anterior (antes de V0.13).
Verifique más sobre diferentes sintaxis aquí .
Sin embargo, esta parte:
const User = React.createClass({ render: function () { console.log('props: ' + JSON.stringify(this.props.users)); const users = this.props.users.map((user) => { return ( <User key={user._id} username={user.username} />se ve extraño Creo que usaste Usuario dentro de Usuario.
Así es como lo reescribí, con algunas modificaciones menores ya que no tengo axios de usuario.
class UserList extends React.Component{ constructor(props){ super(props); this.state = { users : [] }; } componentDidMount() { this.loadUsersFromServer(); } loadUsersFromServer(){ this.setState({users: [{ "_id": 1, "username": "Nicole", "password": "0uTjaH", "_v": "7.6.9" }, { "_id": 2, "username": "Steve", "password": "22l8h6a8NPU", "_v": "7.41" }, { "_id": 3, "username": "Joyce", "password": "yA3efEc", "_v": "6.3" }, { "_id": 4, "username": "Todd", "password": "7LsQ9aHqIfhy", "_v": "7.1" }, { "_id": 5, "username": "Maria", "password": "uHZ5fkCi04v", "_v": "9.31" }] }); } render(){ return ( <div> <h1>User List </h1> <User users={this.state.users} /> </div> ); } }; class User extends React.Component{ constructor(props){ super(props); } render(){ console.log(typeof(this.props.users)); //console.log(this.props.users); //const user = JSON.stringify(this.props.users); const userList = this.props.users.map((user) => { return ( <div> <span>key={user._id}</span> <span>username={user.username}</span> </div> ); }); return ( <div id="users"> {userList} </div> ); } } ReactDOM.render(<UserList /> , document.getElementById('root') ); span {padding: 3px} <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>