Как сделать так, чтобы условие гонки не сбрасывало вызов API? - PullRequest
Новая
       85

Как сделать так, чтобы условие гонки не сбрасывало вызов API?

1 голос
/ 30 января 2020

Я пытаюсь позвонить с помощью топора ios .get и установить const под названием фильмы, содержащиеся в состоянии компонента с данными, которые возвращаются из этого вызова. Однако, похоже, что вызов API не работает. Данные из вызова API никогда не заполняют константные фильмы, и, в свою очередь, другая функция, которая опирается на данные из констант, продолжает возвращаться неопределенной, нарушая код. В настоящее время у меня есть константы фильмов, инициализированные как пустой массив, что, как мне показалось, может быть проблемой. Я попытался изменить код и инициализировать как пустую строку, так и ноль. Ни одно из этих изменений не дало других результатов. Фильм const все еще возвращается как пустой массив. Может кто-нибудь заметит мою ошибку? 

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import axios from "axios";

const initialMovie = {
    id: '',
    title: '',
    director: '',
    metascore: '',
    stars: [],
  };

const UpdateMovie = () => {
    const [movies, setMovies] = useState([]);
    const [specificMovie, setSpecificMovie] = useState(initialMovie);
    const { id } = useParams();

    useEffect(() => {
        axios.get('http://localhost:5000/api/movies')
        .then(res => setMovies(res.data))
        .catch(err => console.log(err))
    }, [])

    console.log(movies);

    useEffect(() => {
        const movieToUpdate = movies.find(m => `${m.id}` === id);

        if (movies !== []) {
            setSpecificMovie(movieToUpdate);
        }
    }, [movies, id])

    const handleChanges = e => {
        e.persist();
        let value = e.target.value;

        setSpecificMovie({
            ...specificMovie,
            [e.target.name]: value
        })
    };

    return (
        <div>
            <form>
                <input type="text" name="title" className="input" value={movieToUpdate.title} />
                <input type="text" name="director" className="input" value={movieToUpdate.director} />
                <input type="text" name="metascore" className="input" value={movieToUpdate.metascore} />
                <button>Submit</button>
            </form>
        </div>
    )
};

export default UpdateMovie;

1 Ответ

1 голос
/ 30 января 2020

Ваш код в порядке (получить часть). Mov ie update useEffect является неправильным: 

useEffect(() => {
    const movieToUpdate = movies.find(m => `${m.id}` === id);

    if (movies !== []) {
        setSpecificMovie(movieToUpdate);
    }
}, [movies, id])

Проверка Movies! == [] всегда будет ложной, поскольку [] равно new Array () (всегда новая ссылка). Вам нужна проверка, подобная этой: 

if (movies.length !== 0 && movieToUpdate)

Эта проверка, что в ваших фильмах есть что-то, и что movieToUpdate не является неопределенным (функция find возвращает значение undefined, если не найдено).

Вы можете даже упростить проверку только: 

if (movieToUpdate)
...