如何修复 Algolia 的反应即时搜索连接范围滑块中的"<attribute> is not a retrieved facet"？

Question

我正在使用带有react-instantsearch的范围滑块，并且我正在尝试使用组件状态中的变量来控制attributeName道具。

滑块（其代码如下）从父组件调用，如下所示：

<InstantSearch
    appId='etc'
    apiKey='etc etc'
    indexName='etc'
 >
    <InstantSearchSlider
        updatePriceAttributeName={this.props.updatePriceAttributeName}
        min={this.props.min}
        max={this.props.max}
        attributeName={this.state.currentAttributeName}
     />
</InstantSearch>

但是，当我在 state 中更改 currentAttributeName 值时，我遇到了此错误：

Uncaught Error: prices.hourly.ten is not a retrieved facet.
    at SearchResults../node_modules/algoliasearch-helper/src/SearchResults/index.js.SearchResults.getFacetValues (index.js:640)
    at ProxyComponent.getProvidedProps (connectRange.js:119)
    at ProxyComponent.getProvidedProps (createConnector.js:259)
    at ProxyComponent.componentWillReceiveProps (createConnector.js:168)
    at ProxyComponent.componentWillReceiveProps (createPrototypeProxy.js:44)
    at ReactCompositeComponent.js:610
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:609)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:546)
    at Object.receiveComponent (ReactReconciler.js:124)

我希望我的用户从可能的属性列表中选择一个属性。有没有办法做到这一点？

// InstantSearchSlider.js
// nearly a full copy/paste from algolia docs, but with a different slider component
class Range extends Component<Props, State> {
    static defaultProps = {
        refine: minMax => minMax
    };
    state = { currentValues: { min: this.props.min, max: this.props.max } };
    componentWillReceiveProps(sliderState) {
      if (sliderState.canRefine) {
        this.setState({
            currentValues: {
                min: sliderState.currentRefinement.min,
                max: sliderState.currentRefinement.max
            }
        });
        }
    }
    onValuesUpdated = sliderState => {
        this.setState({
            currentValues: {
                min: sliderState[0],
                max: sliderState[1]
            }
        });
    };
    onChange = sliderState => {
        console.log(sliderState);
        if (
            this.props.currentRefinement.min !== sliderState[0] ||
            this.props.currentRefinement.max !== sliderState[1]
        ) {
            this.props.refine({
                min: sliderState[0],
                max: sliderState[1]
            });
        }
    };
    render() {
        const { min, max, currentRefinement } = this.props;
        const { currentValues } = this.state;
        return min !== max
            ? <div>
                  <PackageSelector handleUpdate={this.props.updatePriceAttributeName} />
                  <Slider
                      range
                      defaultValue={[min, max]}
                      min={min}
                      max={max}
                      value={[currentRefinement.min, currentRefinement.max]}
                      onChange={this.onChange}
                      onAfterChange={this.onValuesUpdated}
                  />
                  {/* <Rheostat
                      min={min}
                      max={max}
                      values={[currentRefinement.min, currentRefinement.max]}
                      onChange={this.onChange}
                      onValuesUpdated={this.onValuesUpdated}
                  /> */}
                  <div
                      style={{
                          display: 'flex',
                          justifyContent: 'space-between'
                      }}
                  >
                      <div>
                          {currentValues.min}
                      </div>
                      <div>
                          {currentValues.max}
                      </div>
                  </div>
              </div>
            : null;
    }
}
export default connectRange(Range);

ETA：当我尝试在初始渲染时隐藏即时搜索小部件，在用户交互后显示它们（例如，在可折叠的div中）时，也会发生此错误。我想这意味着这个问题没有直接与状态相关，但我还不确定更新标题是什么。

Answer 1

感谢来自Algolia的Marie在这里帮助我。

该错误是一系列问题的结果。

我试图在RangeSlider上设置的属性在破折号中没有attributesForFaceting。我添加了它们，但这并没有立即解决问题。

在添加它们之前，滑块可以工作，但它不是自动计算最小/最大值（并且没有抛出任何错误），所以我只是硬编码最小值/最大值。

不过，当我尝试交换attributeNames时，硬编码的最小/最大值似乎会破坏滑块，无论这些值是否在attributesForFaceting中。

因此，我

删除了硬编码的最小值/最大值，并且由于我已将属性添加到attributesForFaceting，最小值/最大值计算正确，并且我能够在属性之间交换。