// replace
return <p>hello</p>;
// with
return <p>{JSON.stringify(movies)}</p>;

现在您应该看到，您的代码实际上是可以工作的。不能工作的是console.log(movies)。这是因为电影指向旧的状态。如果你把console.log(movies)移到useEffect之外，在返回的正上方，你会看到更新后的movies对象。

很像扩展React创建的类组件中的. setstate()。组件或React。使用useState钩子提供的更新器的PureComponent状态更新也是异步的，并且不会立即反映出来。

此外，这里的主要问题不仅是异步性质，而且是函数基于当前闭包使用状态值，状态更新将在下一次重新呈现中反映出来，这样现有的闭包不会受到影响，但会创建新的闭包。现在，在当前状态下，钩子中的值是由现有的闭包获得的，当重新呈现发生时，闭包将根据是否再次重新创建函数而更新。

即使您添加了一个setTimeout函数，尽管超时将在重新呈现发生的一段时间后运行，但setTimeout仍将使用前一个闭包的值，而不是更新的值。

setMovies(result);
console.log(movies) // movies here will not be updated

如果你想在状态更新上执行一个动作，你需要使用useEffect钩子，就像在类组件中使用componentDidUpdate一样，因为useState返回的setter没有回调模式

useEffect(() => {
    // action on update of movies
}, [movies]);

就更新状态的语法而言，setMovies(result)将用异步请求中可用的movies值替换状态中先前的movies值。

但是，如果希望将响应与先前存在的值合并，则必须使用状态更新的回调语法以及正确使用扩展语法，如

setMovies(prevMovies => ([...prevMovies, ...result]));

我发现这很好。不将状态(方法1)定义为，例如，

const initialValue = 1;

const [state,setState] = useState(initialValue)

试试这个方法(方法2)，

const [state = initialValue,setState] = useState()

这在没有使用useEffect的情况下解决了渲染问题，因为在这种情况下我们不关心它的内部闭包方法。

附注:如果你关心在任何用例中使用旧状态，那么useState和useEffect需要使用，因为它需要那种状态，所以在这种情况下接近1应使用。

如果我们必须只更新状态，那么更好的方法是使用push方法。

这是我的代码。我想从Firebase状态存储url。

const [imageUrl, setImageUrl] = useState([]);
const [reload, setReload] = useState(0);

useEffect(() => {
    if (reload === 4) {
        downloadUrl1();
    }
}, [reload]);


const downloadUrl = async () => {
    setImages([]);
    try {
        for (let i = 0; i < images.length; i++) {
            let url = await storage().ref(urls[i].path).getDownloadURL();
            imageUrl.push(url);
            setImageUrl([...imageUrl]);

            console.log(url, 'check', urls.length, 'length', imageUrl.length);
        }
    }
    catch (e) {
        console.log(e);
    }
};

const handleSubmit = async () => {
    setReload(4);
    await downloadUrl();
    console.log(imageUrl);
    console.log('post submitted');
};

这段代码将url置于数组状态。这可能对你也有用。

React的useEffect有自己的状态/生命周期。它与状态突变有关，直到效果被破坏才会更新状态。

只要在参数状态中传递一个参数或留下一个黑色数组，它就会完美地工作。

React.useEffect(() => {
    console.log("effect");
    (async () => {
        try {
            let result = await fetch("/query/countries");
            const res = await result.json();
            let result1 = await fetch("/query/projects");
            const res1 = await result1.json();
            let result11 = await fetch("/query/regions");
            const res11 = await result11.json();
            setData({
                countries: res,
                projects: res1,
                regions: res11
            });
        } catch {}
    })(data)
}, [setData])
# or use this
useEffect(() => {
    (async () => {
        try {
            await Promise.all([
                fetch("/query/countries").then((response) => response.json()),
                fetch("/query/projects").then((response) => response.json()),
                fetch("/query/regions").then((response) => response.json())
            ]).then(([country, project, region]) => {
                // console.log(country, project, region);
                setData({
                    countries: country,
                    projects: project,
                    regions: region
                });
            })
        } catch {
            console.log("data fetch error")
        }
    })()
}, [setData]);

或者，您可以尝试React. useref()在React钩子中进行即时更改。

const movies = React.useRef(null);
useEffect(() => {
movies.current='values';
console.log(movies.current)
}, [])

使用我库中的自定义钩子，你可以等待状态值更新:

useAsyncWatcher(…values):watcherFn(peekPrevValue: boolean)=>Promise -是一个围绕useEffect的承诺包装器，它可以等待更新并返回一个新值，如果可选的peekPrevValue参数设置为true，则可能返回一个以前的值。

(现场演示)

    import React, { useState, useEffect, useCallback } from "react";
    import { useAsyncWatcher } from "use-async-effect2";
    
    function TestComponent(props) {
      const [counter, setCounter] = useState(0);
      const [text, setText] = useState("");
    
      const textWatcher = useAsyncWatcher(text);
    
      useEffect(() => {
        setText(`Counter: ${counter}`);
      }, [counter]);
    
      const inc = useCallback(() => {
        (async () => {
          await new Promise((resolve) => setTimeout(resolve, 1000));
          setCounter((counter) => counter + 1);
          const updatedText = await textWatcher();
          console.log(updatedText);
        })();
      }, []);
    
      return (
        <div className="component">
          <div className="caption">useAsyncEffect demo</div>
          <div>{counter}</div>
          <button onClick={inc}>Inc counter</button>
        </div>
      );
    }
    
    export default TestComponent;

useAsyncDeepState是一个深度状态实现(类似于此。setState (patchObject))，它的setter可以返回一个与内部效果同步的承诺。如果调用setter时不带参数，则它不会更改状态值，而只是订阅状态更新。在这种情况下，您可以从组件内部的任何地方获取状态值，因为函数闭包不再是障碍。

(现场演示)

import React, { useCallback, useEffect } from "react";
import { useAsyncDeepState } from "use-async-effect2";

function TestComponent(props) {
  const [state, setState] = useAsyncDeepState({
    counter: 0,
    computedCounter: 0
  });

  useEffect(() => {
    setState(({ counter }) => ({
      computedCounter: counter * 2
    }));
  }, [state.counter]);

  const inc = useCallback(() => {
    (async () => {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      await setState(({ counter }) => ({ counter: counter + 1 }));
      console.log("computedCounter=", state.computedCounter);
    })();
  });

  return (
    <div className="component">
      <div className="caption">useAsyncDeepState demo</div>
      <div>state.counter : {state.counter}</div>
      <div>state.computedCounter : {state.computedCounter}</div>
      <button onClick={() => inc()}>Inc counter</button>
    </div>
  );
}