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

Question

我正在尝试为自己制作一份锻炼日志，并作为 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 将锻炼列表设置为我的锻炼列表，它就会记录为未定义，并且我无法显示它。问题从何而来？

Answer 1

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

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

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