如何在react native中输入时立即更新状态

Question

我正在尝试从用户那里获取输入，它正在工作，但在每个输入状态下都是更新和重新呈现组件。我想在用户键入一些查询时立即更新状态。例如，如果我像(enta(那样键入4个字符，那么我的组件将重新渲染4个类型。我想实现我的目标，例如，如果用户类型(enta(，那么我就不会一次又一次地重新渲染。我只想重新渲染一次。有人能帮帮我吗。

代码

<TextInput
style={styles.inputStyle}
placeholder="Search medicine and health products"
autoCapitalize="none"
onChangeText={(input)=>{
this.setState({
subCategoriesShow: true,
loader: true,
inputValue: value,
queries: [],
});
setTimeout(() => {
console.log("2@@@@@@@@@ ", this.state.inputValue);
axios
.get(
`${config.apiPath}/public/api/search`,
{
params: {
query: this.state.inputValue,
},
}
)
.then((res) => {
this.setState({
queries: res.data,
loader: false,
});
});
}, 3000);
}}
onBlur={handleBlur}
autoCorrect={false}
/>

Answer 1

您可以设置一些字符条件或使用debounce。

import * as _ from 'lodash';
componentDidMount = () => {
this.onChangeTextDelayed = _.debounce(this.onChangeData, 500);
}
onChangeData = (event) => {
//call some axios api and set the state.
}
<TextField
onChangeText={(event) => {
this.state.searchText = event
this.onChangeTextDelayed(event)/>
}}

Answer 2

你可以沿着lodash.debounce 的思路来研究一些东西