Question

如何从嵌套对象中获取数据？

我正在使用地图功能，但出现此错误：

TypeError：this.state.user.map不是函数

我在Table组件上使用了map函数，并且工作正常，但嵌套却不行！

我不知道为什么会这样。

嵌套对象：

"users": [
      {
        "id": 1,
        "name": "Leanne Graham",
        "username": "Bret",
        "email": "Sincere@april.biz",
        "address": {
          "street": "Kulas Light",
          "suite": "Apt. 556",
          "city": "Gwenborough",
          "zipcode": "92998-3874",
          "geo": {
            "lat": "-37.3159",
            "lng": "81.1496"
          }
        },
        "phone": "1-770-736-8031 x56442",
        "website": "hildegard.org",
        "company": {
          "name": "Romaguera-Crona",
          "catchPhrase": "Multi-layered client-server neural-net",
          "bs": "harness real-time e-markets"
        }
      }
]

我已经尝试过这种方式：

   {this.state.user.map(usr =>
            <ul>
                {usr.address.map(sub =>
                    <li>
                        {sub.street}
                    </li>
                )}
            </ul>
        )}

//and

    {this.state.user.map(usr =>
                <ul>
                    <li>
                        {usr.address.street}
                    </li>
            </ul>
        )}

这是我的组件：

表格

export default class Table extends React.Component{

    constructor(props) {
        super(props);

        this.state = {
          usuarios: [],
        };
    }

      componentDidMount() {

        axios.get(configs.BASE_URL + 'users')
        .then(response =>{
            this.setState({usuarios: response.data});
        })
    }

    splitNames = (name,index) =>{

        let splitName = name.split(' ')
        name = splitName[index]
        return name
    }

    render(){
        return(
            <div>
                <table className="table table-striped">
                    <thead>
                        <tr>
                        <th>ID</th>
                        <th>NOME</th>
                        <th>SOBRENOME</th>
                        <th>EMAIL</th>
                        <th>AÇÃO</th>
                         <th><button className="btn btn-primary">Paginação<span>{/*font-awesome icon*/}</span></button></th>
                        </tr>
                    </thead>
                    <tbody>
                             {this.state.usuarios.map((usuario, index) => 
                                <tr key={index}>
                                    <td>{usuario.id}</td>
                                    <td>{this.splitNames(usuario.name,0)}</td> 
                                    <td>{this.splitNames(usuario.name,1)}</td>
                                    <td>{usuario.email}</td>
                                    <td><button className="btn btn-primary" onClick={() => this.props.userInfo(usuario.id)}>Ação</button></td>
                                </tr>
                             )}      
                    </tbody>    
                </table>
            </div>
        )
    }
}

模式

export default class Modal extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            user: []
        }

    }



    userId = id => {
        axios.get(configs.BASE_URL + `users/${id}`)
            .then(response => {
                this.setState({ user: response.data })
            })
    }



    render() {
        return (
            <div>
                {this.state.user.map(usr =>
            <ul>
                    <li>
                        {usr.address.street}
                    </li>
            </ul>
        )}
                <Table
                    userInfo={this.userId}
                />
            </div>

        )
    }
}

Answer 1

应该可以。尝试打印从服务器获得的响应。可能就是问题所在。

Answer 2

尝试直接将阵列分配给用户并检查。可能是您获取的response.data的问题。

这对我来说很好。

从嵌套对象获取数据

2 个答案: