1

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

4

1 回答 1

1

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

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

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

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

但是，当我尝试交换时，硬编码的 min/max 似乎破坏了滑块attributeNames，无论这些值是否在attributesForFaceting.

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

于 2017-10-24T00:48:01.243 回答