Как запустить часть useEffect в первую очередь в React-Hooks?

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 обратный вызов выполняется после фазы рендеринга .

Кроме того, вызовы выборки являются асинхронными, поэтому вы хотите использовать условный рендеринг :

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>
  );
};