ReactJS: Cannot read property 'raw' of undefined

Question

I am working on a search engine using the swiftype reackJS demo app as a starting point. It's using the search-ui npm.

I get: Cannot read property 'raw' of undefined

   export default ({ result }) => (
        <img
          id="offre_logo_3"
          alt=""
          style={{
            position: "relative",
            zIndex: 1002,
            display: "block",
            top: "88px",
            margin: "0 auto",
            height: "30px",
            width: "30px"
          }}
          src={"https://www.cliiic.com/images/" + result.icone.raw}
        />
   );

result.icone.raw is properly set up from what I understand in the App.js file like this:

result_fields: {
  id: { raw: {} },
  couleur: { raw: {} },
  icone: { raw: {} },
  notice: { raw: {} },
  short_title: {
    snippet: {
      size: 50,
      fallback: true
    }
  },
  name: {
    snippet: {
      size: 50,
      fallback: true
    }
  },
  city: { raw: {} },
  region: { raw: {} },
  zip: { raw: {} },
  type: { raw: {} },
  accepted_clic: { raw: {} },
  alltxt: { raw: {} },
  price: { raw: {} },
  quantity: { raw: {} },
  start_date: { raw: {} },
  end_date: { raw: {} },
  newmembersonly: { raw: {} },
  main_category: { raw: {} },
  secondary_category: { raw: {} }
}

Testing app posted here https://5kyd5.csb.app/offre.php?q=test&size=n_20_n (Loads a blank page because of the error. Open up console to see whats happening)

Source code can be found here: https://codesandbox.io/s/video-games-tutorial-with-images-5kyd5

I can see the icone col in the swiftype schema table and it's populated as expected.

Any help would be greatly appreciated.

I posted the result object in the console and everything seems ok in the way I am trying to access the object value.

This is a link to the JSON object returned by the API https://jsonblob.com/d081e6ed-186c-11ea-a766-135bd1c509b2

================= EDIT:

I think I may have found the problem ... By looking at the JSON the API returns, I noticed the icone var is not in the first result!

https://jsonblob.com/d081e6ed-186c-11ea-a766-135bd1c509b2

So that means the product was proberbly deleted and not sync with the elastic search system. Is there a way to avoid a blanc page if the var is none existing?

Answer 1

Here is the link for a working sandbox https://codesandbox.io/s/video-games-tutorial-with-images-6zh7i

If you want everything to be sync you can create const fields before returning which will be assigned an empty object if those keys are undefined

e.g const {icone} = result || {}

You ca do this for all keys if you want.

Answer 2

You're setting result_fields object but calling result object. Try renaming your object to be the same and see if you continue to experience issues!

Edit: It seems you're calling some script/api/carrier-pigeon to populate the result object. However, when you call the element you're exporting, that object may not exist yet. Try modifying your export to the following and you should see what I'm talking about:

export default ({ result }) => {
console.log('And the results are in!', result);
return (
        <img
          id="offre_logo_3"
          alt=""
          style={{
            position: "relative",
            zIndex: 1002,
            display: "block",
            top: "88px",
            margin: "0 auto",
            height: "30px",
            width: "30px"
          }}
          src={"https://www.cliiic.com/images/" + result.icone.raw}
        />
   )};