时间戳

首页 > 解决方案 > React Setstate 在 JSON 化后使我的状态项未定义

javascript - React Setstate 在 JSON 化后使我的状态项未定义

问题描述

我正在尝试为自己制作锻炼日志，并作为 React 和 Node.js 的培训。我有自己的 API，其中包含许多功能，包括一个名为“/get-workouts”的 API，顾名思义，它可以从数据库中获取锻炼。

这是API

app.get('/get-workouts', (req, res) => {
db('workoutlogger').select('*')
.limit(3)
.from('workouts')
.then(workouts => {
    if(workouts.length) {
        console.log(workouts);
        res.status(200).json(workouts);
    } else {
        res.status(400).send('No workouts found');
    }
})
.catch(err => {
    console.log(err);
    res.status(404).send('Error getting workouts')
   })
})

这是我的前端：

constructor(props) {
    super(props)
    this.state = {
        workoutList: {}
    }
}

getWorkouts = () => {
    fetch('http://localhost:3001/get-workouts')
    .then(workouts => {
        workouts.json();
    })
    .then(workoutList => {
        this.setState({workoutList})
    })
    .catch(err => console.log('There was an error getting workouts', err))
}

componentDidMount() {
    this.getWorkouts();
}

如果我在获取的第一个 .then() 中 console.log “锻炼”。我的 API 清楚地记录了我登录的最后 3 次锻炼的列表，最初，this.state.workoutList 是一个对象。但是一旦 set.state 应该将锻炼列表设置为我的锻炼列表，它就会记录为未定义，我无法显示它。问题出在哪里？

标签： javascriptreactjsfetchstate

解决方案

您需要在连续.then的 s 之间传递值，它们不会被隐式传递。一个的返回值.then成为下一个的参数。所以这样做：

.then(workouts => workouts.json())
.then(workoutList => {
    this.setState({workoutList})
})

删除花括号意味着它隐式返回workouts.json()，然后它将成为workoutList下一个参数.then

推荐阅读