React-native issue getting imageUri out of an array with a for Loop-CodePudding

I'm trying to get for each imageUri in the products array the value. After which is encoded in Base64 and stocked in the const "bloc". default place of stocking images bloc gives a string uri of the image.

I stock the concatenated data into the variable img and pass it to the product list.

The product list is made of divs to be able to pdf the data. my console in the logs EditDocument.jsx look like this:

console.log("ED IMG2:", img);
for (let i = 0; i < img.length; i  ) {
 console.log("ED IMGS:", img.imageUri);
}

`ED IMG2: Array [ undefined, undefined, undefined, ] ED IMGS: Array [ undefined, undefined, undefined, ]

my console logs in ProductList.jsx: console.log("PROD LIST IMG:", img),

PROD LIST IMG: Array [ undefined, undefined, undefined, ]

EditDocument.jsx :

let img = [];
  for (let i = 0; i < data?.products?.length; i  ) {
  try {
    if (data?.products) {
      const bloc = await FileSystem.readAsStringAsync(data.products.imageUri, {
        encoding: FileSystem.EncodingType.Base64,
      })
      img = "data:image/png;base64,"   bloc;

      console.log("ED IMG:", img);
    }
  } catch (error) {
    console.log(error);
  }
  }
  img.push(img[i]);
  }


  console.log("ED IMG2:", img);
  for (let i = 0; i < img.length; i  ) {
    console.log("ED IMGS:", img.imageUri);
  }

ED IMG2: Array [ undefined, undefined, undefined, ]

ProductList.jsx :

const ProductList = ({ products, language, img }) => {

    return (
     console.log("PROD LIST IMG:", img),
    <>
      <div style={{ width: "100%", marginBottom: 30 }}>
      <div className="tr">
        <div className="th col1">#</div>
        <div className="th col2">{t("PRODUCT", { lng: language })}</div>
        <div className="th col3">{t("DESCRIPTION", { lng: language })}</div>
        <div className="th col4">{t("N°", { lng: language })}</div>
        <div className="th col5">{t("PRICE", { lng: language })}</div>
        <div className="th col6">{t("VAT", { lng: language })}</div>
        <div className="th col7">{t("TOTAL", { lng: language })}</div>
      </div>
      
      {products?.map((product, index) => (
        console.log("PROD LIST IMG:", img),
        <div key={index} className="tr no-break">
          {/* <div className="td col1">{index   1}</div> */}
          {img ? (
            console.log("PROD2 LIST IMG:", img.length),
            img.map(function (imageUri, index) {
              return (
                <div key={index} className="td col1">
                  <img src={imageUri} style={styles.image} />
                </div>
              );
            })
          ) : (
            <div className="td col1">{index   1}</div>
          )}
          
          <div className="td col2">{product.name}</div>

CodePudding user response：

When doing async operations on an array type of useState Promise.all is your friend.

export const getData = async (limit=10,skip=5) => {
  const data = await fetch(`https://dummyjson.com/products?limit=${limit}&skip=${skip}`);
  const json = await data.json();
  const colors = colorGenerator(limit)
  const products = await Promise.all(
    json.products.map(async (product,i) => {
      // strip unnecessary data
      const { thumbnail, images, stock, ...item } = product;
      return {
        ...item,
        imageUri,
        color:colors[i]
      };
    })
  );
  return products
};

For a more fleshed out example see here

CodePudding user response：

I solved my issue like this:

  let imgs = [];
  try {
    for (let i = 0; i < data?.products?.length; i  ) {
    if (data?.products[i]?.imageUri) {
      const bloc = await FileSystem.readAsStringAsync(data.products[i]?.imageUri, {
        encoding: FileSystem.EncodingType.Base64,
      })
      imgs.push(`data:image/png;base64,${bloc}`)
    }
  }
  } catch (error) {
    console.log(error);
  }

Thanks for all answers,