ReactJS：无法读取未定义的属性“原始”

Question

我正在开发一个使用 swiftype reackJS 演示应用程序作为起点的搜索引擎。它正在使用 search-ui npm。

我得到：无法读取未定义的属性“原始”

   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 是根据我在 App.js 文件中的理解正确设置的，如下所示：

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: {} }
}

测试应用发布在这里https://5kyd5.csb.app/offre.php?q=test&size=n_20_n （由于错误加载一个空白页面。打开控制台查看发生了什么）

源代码可以在这里找到：https://codesandbox.io/s/video-games-tutorial-with-images-5kyd5

我可以在 swiftype 模式表中看到 icone col，并且它已按预期填充。

任何帮助将不胜感激。

我在控制台中发布了结果对象，我尝试访问对象值的方式似乎一切正常。

这是指向 API 返回的 JSON 对象的链接 https://jsonblob.com/d081e6ed-186c-11ea-a766-135bd1c509b2

================= 编辑：

我想我可能发现了问题...通过查看 API 返回的 JSON，我注意到 icone var 不在第一个结果中！

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

这意味着该产品已被恶意删除，并且未与弹性搜索系统同步。如果 var 不存在，有没有办法避免空白页面？

Answer 1

这是一个工作沙箱的链接https://codesandbox.io/s/video-games-tutorial-with-images-6zh7i

如果您希望所有内容都同步，您可以在返回之前创建 const 字段，如果这些键是 undefined，则会为其分配一个空对象

例如const {icone} = result || {}

如果您愿意，您可以对所有键执行此操作。

Answer 2

您正在设置result_fields 对象但调用result 对象。尝试将您的对象重命名为相同的名称，看看您是否仍然遇到问题！

编辑：您似乎正在调用一些脚本/api/carrier-pigeon 来填充result 对象。但是，当您调用要导出的元素时，该对​​象可能还不存在。尝试将您的导出修改为以下内容，您应该会明白我在说什么：

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}
        />
   )};