مشکل async نبودن useState

Question

سلام
به کد زیر توجه کنید چطوری مشکل async نبودن useState حل کنم؟
الان alert اجرا میشه و مقدار undefined هستش درصورتیکه در خط 17 userID state مقداردهی شده.

import React, { useEffect, useState } from "react";
import axios from "axios";

function Todo() {
  const [todoData, setTodoData] = useState();
  const [userID, setUserID] = useState();
  useEffect(() => {
    getTaskData();
  }, []);

  const getTaskData = async () => {
    const resultRequest = await axios.get(
      "https://jsonplaceholder.typicode.com/todos/1"
    );

    setTodoData(resultRequest.data);
    setUserID(resultRequest.data.userId);
    await getUserData();
  };

  const getUserData = async () => {
    alert(userID);
    const resultRequest = await axios.get(
      `https://jsonplaceholder.typicode.com/todos/${userID}`
    );
  };

  return (
    <div>
      <div><span>Title:</span><span style={{paddingLeft:"10px"}}>{todoData?.title}</span></div>
      <div><span>userID:</span><span style={{paddingLeft:"10px"}}> {userID}</span></div>
    </div>
  );
}

export default Todo;

جاوااسکریپت

محسن محمدخانی

27 اردیبهشت 00

Answer 1

حذف شده

سلام

این مورد رو با توجه به شرایط میشه به روش های مختلفی نوشت. من بر مبنای کدهای خودت یه نمونه میتونم این کد رو بهت پیشنهاد بدم! ولی این به معنای بهترین نیست چون که باید شرایط سنجیده بشه که میخوایم چکاری انجام بدیم و به این صرفا به عنوان یک راه حل نگاه بکن


import axios from "axios";
import { useEffect, useState } from "react";

function Todo({todoId = 1}) {
  const [{userId, ...todo}, setTodo] = useState({});
  const [user, setUser] = useState();
  useEffect(() => {
    const getTaskData = async () => {
      const response = await axios.get(
        `https://jsonplaceholder.typicode.com/todos/${todoId}`
      );
  
      setTodo(response.data);
    };
  
    getTaskData();
  }, [todoId]);

   useEffect(() => {
     if (userId) {
      const getUserData = async () => {
        const reponse = await axios.get(
          `https://jsonplaceholder.typicode.com/users/${userId}`
        );

        setUser(reponse.data)
      };

      getUserData()
     }
  }, [userId])

  

  return (
    <div>
      <div><span>Title:</span><span style={{paddingLeft:"10px"}}>{todo?.title}</span></div>
      <div><span>userID:</span><span style={{paddingLeft:"10px"}}> {user?.name}</span></div>
    </div>
  );
}

export default Todo;

توسط

مجتبی سوری

27 اردیبهشت 00

مشکل async نبودن useState

سوالات مرتبط