代码之家 › 专栏 › 技术社区 › Ralph David Abernathy

useState挂钩正在正确设置状态,但控制台记录状态时显示的值已过时。如何解决?

react-state-management react-state react-hooks reactjs javascript

0

Ralph David Abernathy · 技术社区 · 4 年前

我正在努力学习钩子和 useState 这种方法让我很困惑。我以数组的形式为状态分配一个初始值。中的set方法 使用状态 无论有没有spread语法,它都不适合我。

我在另一台电脑上制作了一个API,我正在调用它并获取我想要设置为状态的数据。

这是我的代码:

<div id="root"></div>

<script type="text/babel" defer>
// import React, { useState, useEffect } from "react";
// import ReactDOM from "react-dom";
const { useState, useEffect } = React; // web-browser variant

const StateSelector = () => {
  const initialValue = [
    {
      category: "",
      photo: "",
      description: "",
      id: 0,
      name: "",
      rating: 0
    }
  ];

  const [movies, setMovies] = useState(initialValue);

  useEffect(() => {
    (async function() {
      try {
        // const response = await fetch("http://192.168.1.164:5000/movies/display");
        // const json = await response.json();
        // const result = json.data.result;
        const result = [
          {
            category: "cat1",
            description: "desc1",
            id: "1546514491119",
            name: "randomname2",
            photo: null,
            rating: "3"
          },
          {
            category: "cat2",
            description: "desc1",
            id: "1546837819818",
            name: "randomname1",
            rating: "5"
          }
        ];
        console.log("result =", result);
        setMovies(result);
        console.log("movies =", movies);
      } catch (e) {
        console.error(e);
      }
    })();
  }, []);

  return <p>hello</p>;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<StateSelector />, rootElement);
</script>

<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

两者都没有 setMovies(result) 也没有 setMovies(...result) 作品。

我希望 result 要推入的变量 movies 阵列。

0 回复 | 直到 2 年前