我想动态更改反应式搜索中的索引名称,所以我创建了一个状态变量,我更改了这个状态变量,但它不影响加载的组件
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>
);
}