ReactJS：无法读取未定义的属性 'raw'

Question

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

我得到：无法读取未定义的属性 'raw'

   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 table 并且它已按预期填充。

如有任何帮助，我们将不胜感激。

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

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

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

我想我可能已经找到问题了...通过查看 JSON 和 API returns，我注意到图标变量不在第一个结果中！

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

所以这意味着该产品被错误地删除并且没有与弹性搜索系统同步。如果 var none 存在，有没有办法避免空白页面？

Answer 1

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

编辑：您似乎在调用一些 script/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}
        />
   )};

Answer 2

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

如果您希望所有内容都同步，您可以在返回之前创建常量字段，如果这些键是 undefined

，将为该字段分配一个空对象

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

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

ReactJS：无法读取未定义的属性 'raw'

ReactJS: Cannot read property 'raw' of undefined

swiftype

reactjs

ReactJS：无法读取未定义的 属性 'raw'

ReactJS: Cannot read property 'raw' of undefined

swiftype

reactjs

ReactJS：无法读取未定义的属性 'raw'