0

我想动态更改反应式搜索中的索引名称,所以我创建了一个状态变量,我更改了这个状态变量,但它不影响加载的组件

public async componentDidMount() {
        this.setState({
            isLoading: false,
        });
        this.checkLogin();
        settingsProvider.get().then((settings: Settings) => {
            this.setState({focus: settings.focus});
            this.setState({settings: settings});
            const indexName = 'contextful-en' + settings.focus;
            this.setState({indexName: indexName});
            console.info(this.state.indexName);
        }).catch(() => {
            const settings = new Settings();
            settings.focus = 'de';
            const indexName = 'contextful-en' + settings.focus;
            this.setState({indexName: indexName});
            this.setState({settings: settings, focus: settings.focus});
        });
    }
public render(): React.ReactNode {
        return (
            <ReactiveBase
                app={this.state.indexName} {/* here */}
                url='http://xxxx.xxxxxxx.io'
                headers={{'X-Api-Key': 'xxxxxx'}}>
                <View>
                    <DataSearch
                        componentId='searchbox'
                        dataField={[
                            'sentence',
                            'sentence.en',
                            'sentence.de',
                            'raw.translated',
                        ]}
                        highlight={true}
                        placeholder='words or expressions'
                        autosuggest={false}
                    />
                </View>
                <Notification
                              customComponent={(
                                  <View style={styles.notification}>
                                      <LottieView
                                          style={styles.iconx}
                                        source={require('@src/animations/warning.json')}
                                        colorFilters={[{
                                          keypath: 'button',
                                          color: '#F00000',
                                        }, {
                                          keypath: 'Sending Loader',
                                          color: '#F00000',
                                        }]}
                                        autoPlay
                                        loop={true}
                                      />
                                        <Text style={styles.notificationText}>{this.state.message}</Text>
                                  </View>
                              )}
                              ref={(c) => this.notification = c}
                />
                <AnimatedLoader
                    visible={this.state.isLoading}
                    overlayColor='rgba(255,255,255,0.75)'
                    source={require('@src/animations/loader.json')}
                    animationStyle={styles.lottie}
                    speed={1}
                />
                <ScrollView
                    stickyHeaderIndices={[1]}
                    nativeID={'scoller'}
                >
                    <View>
                        <ReactiveList
                            componentId='results'
                            dataField='sentence.de'
                            size={7}
                            showResultStats={false}
                            pagination={true}
                            infiniteScroll={true}
                            scrollTarget={'scroller'}
                            react={{
                                and: 'searchbox',
                            }}
                            onData={(res, idx) => (

                                <View style={styles.result} key={res._id}>
                                    <ListItem
                                        onPress={() => this.explain(res)}
                                        title={res.sentence.de}
                                        description={res.sentence.en}
                                    />

                                </View>


                            )}
                        />
                    </View>
                </ScrollView>
            </ReactiveBase>
        );
    }
4

0 回答 0