如何在 React 的 useEffect 中设置状态？

Question

I'm currently working on a project and I need to get the specific data from backend and set the object. However, it is not setting up the object correctly, and it is just setting the last element.

I'm using ContextAPI for the state management.

My API request looks like following which is used to return the specific product from whole products ( axios there is a hook I set up and it gets the uid and function itself is getting the id which is a product id ):

  const getProductbyId = async (id) => {
    try {
      const response = await axios.get("designer/products", {
        uid: currentAuthData.id,
      });

      const products = response.items;
      const product = products.filter((item) => item.id === parseInt(id));
      return product[0];
    } catch (error) {
      return null;
    }
  }

In my React code, I'm using useEffect to get the specific data and add it to the object.

data here is a Context I'm using and it contains several states. But, I need to use data.setValues here.

  const data = useData();
  const params = useParams();
  useEffect(() => {
    data.setValues({
      ...data.values,
      step1: 1,
    });
    const getProductbyId = async () => {
      const response = await data.requests.getProductbyId(params.id);
      if (response) {
        response.property_groups.forEach((item, i) => {
          data.setValues({
            ...data.values,
            [`step${i + 2}`]: item.group_property.id,
          });
        });
      }
    };
    getProductbyId();
    data.setStep(2);
  }, []);

The problem appears in data.setValues where it does not add the values (which are ids ) to the object.

I tried to use useTimeout but it does not solve the problem. To conclude, I want to add the values to data.values object and use it in another React code.

Answer 1

Change your method like this,

const getProductbyId = async () => {
      const response = await data.requests.getProductbyId(params.id);
      if (response) {
        let newValues=response.property_groups.reduce((prev,item,i)=>{
          prev[`step${i + 2}`]= item.group_property.id;
          return prev;
        },{});
        data.setValues({
          ...data.values,
          ...newValues
        });
      }
    };