如何防止竞争条件抛出 API 调用？

Question

我正在尝试进行 axios.get 调用，并使用从该调用返回的数据设置一个名为 movies 的常量，该常量保存在组件状态中。但是，API 调用似乎不起作用。来自 API 调用的数据永远不会填充电影 const，而在 return 中，另一个依赖于来自所述 const 的数据的函数不断返回未定义，从而破坏了代码。目前，我将电影 const 初始化为一个空数组，我认为这可能是问题所在。我尝试更改代码并初始化为空字符串和 null。这些变化都没有产生不同的结果。电影 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;

Answer 1

您的代码没问题（获取部分）。影片更新useEffect错误：

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

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

电影 !== [] 检查将始终为假，因为 [] 等于 new Array() （始终是新引用）。您需要这样的支票：

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

这会检查您的电影中是否包含某些内容，并且 movieToUpdate 是否未定义（如果未找到，将 return 未定义）。

您甚至可以简化为仅检查：

if (movieToUpdate)

如何防止竞争条件抛出 API 调用？

How to prevent race condition from throwing off API call?

javascript

race-condition

reactjs

axios

use-effect