如何在React-Hooks中首先运行useEffect部件？

Question

如何执行axios部分并将更新后的状态属性发送到Important组件。

当我console.log时，我看到状态作为带有空对象的道具传递，但几秒钟后，状态再次用新获取的值更新，这意味着我的返回首先运行，然后是我的usEffect axios部分运行，

如何确保axios部分应首先运行，然后再运行我的返回部分。在第一个go中，应该发送更新的零件，而不是空白的空白零件

const initialState = {
    Important: [{}],
    Error: false
}

const reducer = (state, action) => {
    switch (action.type) {
        case "STEPFIRST":
            return {
                ...state,
                Important: action.payload,
            };
        case "STEPSecond":
            return {
                Error: true,
            };
        default:
            return state;
    }
}

const Landing = () => {
    const [states, dispatch] = useReducer(reducer, initialState)
    console.log(states)

    useEffect(() => {
        axios.get("https://example.com/")
            .then(response => {
                dispatch({
                    type: "STEPFIRST",
                    payload: response.data
                });
            })
            .catch(error => {
                dispatch({
                    type: "STEPSecond"
                });
            });
    },[]);

    const [xyz, xyzfn] = useState();
    console.log(xyz)

    return (
        <div>
        <Important states = {states} xyzfn={xyzfn} />
        <Foo xyz={xyz}/> 
        </div>
    );
};

export default Landing;

Answer 1

useEffect将始终在第一次呈现完成后运行。您可以在您的状态中具有加载状态，并相应地返回组件。

const initialState = {
    Important: [{}],
    Error: false,
    isLoading: true
}

const reducer = (state, action) => {
    switch (action.type) {
        case "STEPFIRST":
            return {
                ...state,
                Important: action.payload,
                isLoading: false
            };
        case "STEPSecond":
            return {
                Error: true,
                isLoading: false
            };

        default:
            return state;
    }
}


const Landing = () => {
    const [states, dispatch] = useReducer(reducer, initialState)

    console.log(states)

    useEffect(() => {
        axios.get("https://example.com/")
            .then(response => {
                dispatch({
                    type: "STEPFIRST",
                    payload: response.data
                });
            })
            .catch(error => {
                dispatch({
                    type: "STEPSecond"
                });
            });
    },[]);

    const [xyz, xyzfn] = useState();
    console.log(xyz)

   if(state.isLoading){
       return <div>Loading....</div>
   }

    return (
        <div>
        <Important states = {states} xyzfn={xyzfn} />
        <Foo xyz={xyz}/> 
        </div>
    );
};

Answer 2

useEffect回调runs after the render phase。

另外，fetch调用是异步的，因此您希望use conditional rendering

const Landing = () => {
  const [states, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    axios
      .get("https://example.com/")
      .then((response) => {
        dispatch({
          type: "STEPFIRST",
          payload: response.data,
        });
      })
      .catch((error) => {
        dispatch({
          type: "STEPSecond",
        });
      });
  }, []);

  // Use any comparison function to indicate that `states` changed.
  // like deep comparison function `isEqual` from lodash lib.
  return (
    <div>
      {!lodash.isEqual(states, initialState) && (
        <Important states={states} xyzfn={xyzfn} />
      )}
    </div>
  );
};