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>

但是，当我更改currentAttributeName中的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 ：当我尝试在初始渲染时隐藏Instantsearch窗口小部件时，也会发生此错误，并在用户交互后显示它们（例如，在可折叠的div中）。我想这意味着问题不是直接与国家联系在一起，但我还不确定更新标题是什么。

Answer 1

感谢Algolia的Marie来帮助我。

错误是一连串问题的结果。

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

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

但是，当我尝试交换attributeNames时，硬编码的最小值/最大值会破坏滑块，而不管值是否在attributesForFaceting中。

所以，我删除了硬编码的min / max，并且，因为我将属性添加到attributesForFaceting，所以最小/最大值被正确计算，我能够在属性之间交换就好了。

我如何修复＆＃34; <attribute>不是检索到的方面＆＃34;在Algolia的react-instantsearch connectedRange滑块？

1 个答案: