React Setstate делает мой элемент состояния неопределенным после JSONizing - PullRequest
Новая
       12

React Setstate делает мой элемент состояния неопределенным после JSONizing

0 голосов
/ 05 марта 2020

Я пытаюсь сделать журнал тренировок для себя и в качестве тренинга для React и Node.js. У меня есть собственный API со многими функциями, в том числе «/ get-workouts», который, как следует из названия, предназначен для получения тренировок из базы данных.

Вот 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();
}

Если я укажу "тренировки" на console.log в первом .then () моего выборки. Мой API четко регистрирует список последних 3 тренировок, в которые я вошел, и изначально this.state.workoutList является объектом. Но как только set.state предположительно устанавливает список тренировок как список моих тренировок, он записывается как неопределенный, и я не могу его отобразить. Откуда проблема?

Ответы [ 2 ]

3 голосов
/ 05 марта 2020

Вам нужно передавать значения между последовательными .then с, они не передаются неявно. Возвращаемое значение одного .then становится аргументом следующего. Сделайте так: 

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

Удаление фигурных скобок означает, что бездействие возвращает workouts.json(), что затем станет аргументом workoutList в следующем .then

1 голос
/ 05 марта 2020

Функция стрелки должна быть правильно понята здесь.

Функция стрелки без фигурных скобок неявно возвращает то, что вычисляет следующий оператор. Однако, если вы используете фигурные скобки, вы формируете блок, который является не чем иным, как списком операторов (которые оцениваются как undefined). Таким образом, нам нужно явно использовать return в этом случае. 

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

getWorkouts = () => {
    fetch('http://localhost:3001/get-workouts')
    .then(workouts => {
        return workouts.json();
    })
    // above then fn can also be written (without curly braces) as below:
    // .then(workouts => workouts.json()) -- removing curly braces returns result of statement implicitly
    .then(workoutList => {
        this.setState({workoutList})
    })
    .catch(err => console.log('There was an error getting workouts', err))
}

componentDidMount() {
    this.getWorkouts();
}
...