Question

我正在尝试从可行的api获取数据并将数据加载到我的UI中。但是items.map is not a function错误总是困扰着我前进。

 constructor(props) {
    super(props);
    this.state = {
        items: [],
        isLoaded: false,
        data: this.props.location.data
    }
}

componentDidMount() {
    console.log('user id profile ' + this.state.data);
    if (this.state.data != null) {
        fetch('http://localhost:3000/api/user/' + this.state.data)
            .then(res => res.json())
            .then(json => {
                this.setState({
                    isLoaded: true,
                    items: json
                }, () => {
                    console.log('Hi '+json);
                })
            });
    }
}

这里也不会打印“ Hi”的控制台日志。我的后端api如下。

app.get('/api/stylist/:userId', (req, res) => {
User.findOne({
    where: {
        userId: req.params.userId
    }
}).then(user=> res.json({
    user: user
}))
})

this.state.data也有一个值。那我哪里出问题了？

Answer 1

您的API似乎返回了一个对象（单个用户），但您正在使用它，就好像它是一个数组（items: json）

componentDidMount() {
    console.log('user id profile ' + this.state.data);
    if (this.state.data != null) {
        fetch('http://localhost:3000/api/user/' + this.state.data)
            .then(res => res.json())
            .then(data => {
                this.setState({
                    isLoaded: true,
                    items: [data.user] // wrapping w/ array should help
                }, () => {
                    console.log('Hi '+ this.state.items);
                })
            });
    }
}

无法从React中的api获取数据

1 个答案: