Reactive Search含冒号字段名的转义与正确访问方法

这个问题其实是JavaScript对象属性访问的基础知识点——当属性名包含冒号这类非合法标识符字符时，你不能用.（点语法）来访问，必须改用方括号语法，把属性名用字符串形式包裹起来。

为什么会报错？ #

JavaScript里，点语法要求属性名必须是合法的标识符（比如不能包含冒号、空格、连字符这些，且不能以数字开头）。你的field_product:title里有冒号，不符合标识符规则，所以用res.field_product:title会直接触发语法错误，解释器根本认不出这是合法的属性访问写法。

正确的写法 #

把点语法改成方括号+字符串的形式：

• 错误写法：res.field_product:title
• 正确写法：res["field_product:title"]

同样，对于field_product:commerce_price:amount，也要写成res["field_product:commerce_price:amount"]。

修正后的完整代码 #

import React, { Component } from 'react';
import { ReactiveBase, DataSearch, ResultCard } from '@appbaseio/reactivesearch';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <ReactiveBase app="indexName" url="https://someurl.amazonaws.com" >
          <DataSearch componentId="SearchSensor" dataField={ "field_product:title" } autoSuggest={true} />
          <ResultCard 
            componentId="results" 
            dataField="field_product" 
            react={{ "and": ["SearchSensor"] }} 
            onData={(res) => ({ 
              "image": res.image, 
              "title": res["field_product:title"], 
              "description": res.description,
              // 如果需要展示价格，也可以用同样方式访问
              "price": res["field_product:commerce_price:amount"]
            })} 
          />
        </ReactiveBase>
      </div>
    );
  }
}
export default App;

这样修改后，就能正常访问带冒号的字段了，不会再触发语法错误啦～

内容的提问来源于stack exchange，提问作者esafwan