如何修复Algolia的"<attribute>不是检索的方面“--即时搜索connectedRange滑块？

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中更改state值时，会遇到以下错误：

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

感谢阿尔戈利亚的玛丽在这里帮助我。

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

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

在添加它们之前，滑块工作正常，但它不是自动计算的min/max (没有抛出错误)，所以我只是硬编码min/max。

然而，当我尝试交换attributeNames时，硬编码min/max似乎破坏了滑块，而不管这些值是否在attributesForFaceting中。

因此，我删除了硬编码的min/max，并且，由于我将属性添加到attributesForFaceting中，所以min/max的计算是正确的，并且能够在属性之间进行交换。