I got stuck on iteration, it shows result perfect but when I render on the component level on load i-CodePudding

I got stuck in rendering component level on load. When I click edit and call edit function, it loads data properly in console and show all objects but it doesn't render on the page level.

Here is my code:

const handleEdit = async () => {
    const { searchBrand } = await searchBrandAPI({ id });
    searchBrand[0].translations.forEach(arrVal => {
        console.log(arrVal, 'arrVal');
        setDynamicValues([ ...dynamicValues, {
                transLanguage: { label: arrVal.language, value: arrVal.languauge },
                transName: arrVal.name,
                transIsActive: { label: formatFirstCharUpperCase(arrVal.isActive, String), value: arrVal.isActive },
        }]);
    }); 
    const strIsActive = { label: formatFirstCharUpperCase(searchBrand[0].isActive, String), value: searchBrand[0].isActive }
    setValues({ name: searchBrand[0].name, isActive: strIsActive })
}

CodePudding user response：

I resolved it this way.

const handleEdit = async () => {
    const { searchBrand } = await searchBrandAPI({ id });
    const transData = [];
    searchBrand[0].translations.forEach(arrVal => {
        transData.push({
            transLanguage: { label: arrVal.language, value: arrVal.languauge },
            transName: arrVal.name,
            transIsActive: { label: formatFirstCharUpperCase(arrVal.isActive, String), value: arrVal.isActive },
        });
    });
    setDynamicValues(transData);
    const strIsActive = { label: formatFirstCharUpperCase(searchBrand[0].isActive, String), value: searchBrand[0].isActive }
    setValues({ name: searchBrand[0].name, isActive: strIsActive })
}

Is this the right way? because I tried memo as well as callback but same thing was showing like last record only even on console it was showing perfect! Please confirm, if I did this in a right way or is there any other shortest way to solve this?

CodePudding user response：

To guarantee, that you get the latest value of the state, you need to use useState callback function to get the previous value.

const handleEdit = async () => {
  const { searchBrand } = await searchBrandAPI({ id });
  searchBrand[0].translations.forEach(arrVal => {
    console.log(arrVal, 'arrVal');
    setDynamicValues(prev => [ ...prev, {
      transLanguage: {
        label: arrVal.language,
        value: arrVal.languauge
      },
      transName: arrVal.name,
      transIsActive: {
        label: formatFirstCharUpperCase(arrVal.isActive, String),
        value: arrVal.isActive
      },
    }]);
  }); 
  const strIsActive = {
    label: formatFirstCharUpperCase(searchBrand[0].isActive, String),
    value: searchBrand[0].isActive
  }
  setValues({ name: searchBrand[0].name, isActive: strIsActive })
}

As setState is an async operation, so the value of dynamicValues doesn't update immediately when you call setDynamicValues.