Reactjs 反应钩混乱

我对useffect和useState挂钩感到困惑。 我有一个页面，我使用useEffect挂钩加载电影列表。 列表很好地显示在我的屏幕上。当我想要编辑一部电影时，我点击它，这会将该电影的ID发送到一个方法，在该方法中，我想在该州的电影列表中查找该电影，将该电影加载到表单中，并将其呈现给编辑。 现在，每当我想查找该电影时，处于我的状态的电影列表都是空的。 虽然它显示在我的屏幕上。 所以我想知道setMovies是做什么的，它们是如何在屏幕上显示的，但是我在其他地方得到了一个空数组

我曾经在没有问题的情况下使用类组件

import React, { useState, useEffect } from 'react';

const MovieList = () => {
    const [openEdit, setOpenEdit] = useState(false);
    const [movieToEdit, setMovieToEdit] = useState({});
    const [movies, setMovies] = useState([]);

    const openEditMovie = (movieId) => {
        console.log("movies", movies); // is empty here !?
        setMovieToEdit(movies.find(m => m.id === movieId));
        setOpenEdit(true);
    }

    useEffect(() => {
        fetchMovies();
    }, []);

    const fetchMovies = async () => {
        let movies = await axios.get('/movies'); // just sample code, you get the picture
        console.log("movies", movies); // lists movies
        setMovies(movies);
    }

    return (
        <List source={movies}/>
        { /* and the dialog with the form etc go below here */ }
    );
};

export default MovieList;

import React，{useState，useffect}来自“React”；
常数MovieList=（）=>{
const[openEdit，setOpenEdit]=useState（false）；
const[movieToEdit，setMovieToEdit]=useState（{}）；
const[movies，setMovies]=useState（[]）；
const openEditMovie=（movieId）=>{
console.log（“movies”，movies）；//此处为空！？
setMovieToEdit（movies.find（m=>m.id==movieId））；
setOpenEdit（true）；
}
useffect（（）=>{
获取电影（）；
}, []);
const fetchMovies=async（）=>{
let movies=wait axios.get（'/movies'）；//只需示例代码，您就可以了解情况
console.log（“电影”，电影）；//列出电影
电影；
}
返回(
{/*下面是带有表单etc的对话框*/}
);
};
导出默认电影列表；

您的代码看起来不错。只需将

setMovies（movies）

更改为

setMovies（movies.data）

，因为Axios返回一个带有属性

data

的响应对象，该属性包含服务器（API）发送的数据

const fetchMovies=async（）=>{
让电影=等待axios.get（“/movies”）；
console.log（“movies”，movies.data）；
setMovies（movies.data）；
};

这里是您的代码的一个小模型，它似乎达到了预期效果，因此我将检查您的axios调用的返回值。您能否澄清您在fetchMovie函数中的日志是否显示

[object object]

？我在问你，因为你提到它实际上列出了电影

import React, { useState, useEffect} from 'react';

const MovieList = () => {
    const [openEdit, setOpenEdit] = useState(false);
    const [movieToEdit, setMovieToEdit] = useState({});
    const [movies, setMovies] = useState([]);

    const openEditMovie = (movieId) => {
        console.log("movieLogEdit:",movies); // not empty
        setMovieToEdit(movies.find(m => m.id === movieId));
        setOpenEdit(true);
    }

    useEffect(() => {
        fetchMovies();
    }, []);

    const fetchMovies = async () => {
        let movies = [1,2,4]; // mocked data
        console.log("movieLogFetch:" + movies); // lists movies on initial render since useEffect has [] as second argument
        setMovies(movies);
    }

    return (
      <div>
        <button className="button is-primary" onClick={openEditMovie}>
          Open Movie Editor
        </button>
      </div>
    );
};

export default MovieList;

import React，{useState，useffect}来自“React”；
常数MovieList=（）=>{
const[openEdit，setOpenEdit]=useState（false）；
const[movieToEdit，setMovieToEdit]=useState（{}）；
const[movies，setMovies]=useState（[]）；
const openEditMovie=（movieId）=>{
console.log（“movieLogEdit:，movies）；//不为空
setMovieToEdit（movies.find（m=>m.id==movieId））；
setOpenEdit（true）；
}
useffect（（）=>{
获取电影（）；
}, []);
const fetchMovies=async（）=>{
让电影=[1,2,4]；//模拟数据
console.log（“movieLogFetch:+movies）；//列出初始渲染时的电影，因为useffect将[]作为第二个参数
电影；
}
返回(
开放式电影编辑器
);
};
导出默认电影列表；

找到了答案，我意识到通过简化代码，我遗漏了导致问题的部分。 在

fetchMovies

方法中，我构建了一个值数组，以传递给Material UI Datatable（）

const fetchMovies=async（）=>{
let movies=wait axios.get（'/movies'）；//只需示例代码，您就可以了解情况
console.log（“电影”，电影）；//列出电影
布景电影(
movies.map（电影=>[
电影id，
movie.name，
电影节，
openEditMovie（movie.id）}/>
])
);
}

显然，正如我所知，在构建这个数组时，

openeditmoine

函数与当时的状态一起复制到内存中。因此，当从

onClick

调用该方法时，我将始终使用空的movies数组来使用旧状态。 当您稍后从代码的其他地方调用

openeditmoine

时，我可以访问更新状态。

---

我从来没见过那个人

我怀疑变量名，你能把变量电影改成别的吗？可能值得一读->&@danialdehvan我很难找到一个名为

movie

的变量。谢谢你的评论。我明白你的意思，但是axios调用只是伪代码。但是，我将再次检查返回值。

const fetchMovies = async () => {
    let movies = await axios.get('/movies'); // just sample code, you get the picture
    console.log("movies", movies); // lists movies
    setMovies(
        movies.map(movie => [
            movie.id, 
            movie.name, 
            movie.year, 
            <EditIcon onClick={() => openEditMovie(movie.id)}/>
        ])
    );
}