使用 Redux 更新列表中的多个文本输入的最佳方法是什么？

Question

我有这个代码来更新一些用Redux中的列表(AccordionList(显示的TextInputs。但在我键入一些文本并离开字段(onBlur(后，该值需要2秒刷新。

示例：我键入文本，离开字段，它会输入上一个值，然后在2秒钟后，该值会用新值更改。

我认为这不是最好的方法，但我不知道如何让它与众不同。

这是代码：

const PieceForm = (props) => {
//Get from Redux Store for default value of each TextInputs
const [remarques, setRemarques] = React.useState(getRemarques); 
//Used to change the text
const [text, onChangeText] = React.useState("");
....
//Used to update my remarques on Store and State when leave the field (onBlur)
function updateRemarque(review) {
//Send to the store
let valueToSend = [{
text: text,
review: review,
PieceId: piece.id,
LieuId: lieuId
}]
const action = {type: "UPDATE_REMARQUE", value: valueToSend}
props.dispatch(action)
//Update remarques state to have the value on the TextInput
let newRemarque = [...remarques]
newRemarque[review.id] = text
setRemarques(
newRemarque
)

}
//Render my fields from AccordionList
const _body = (item) => {
return (
<View style={[{padding: 30}]}>
//My TextInput with default value from remarques state
<TextInput
placeholder='Remarques complémentaires'
style={[GLOBAL.selectLegend]}
multiline={true}
onChangeText={onChangeText}
onBlur={() => updateRemarque(item)}
value={remarques[item.id]}
/>
</View>
);
}
return(
//Render The content (Like a FlatList)
<AccordionList
nestedScrollEnabled
data={reviews}
keyExtractor={item => `${item.id}`}
body={_body}
ListFooterComponent={_footer}
contentContainerStyle={{
paddingBottom: 15,
paddingTop: 30
}}
/>
...

Answer 1

不要使用onBlur，这会让你慢下来。选择对文本字段使用state或redux，并使用onChange回调进行更改。如果你想在redux中使用它，只需在文本更改时启动操作，并使值等于redux值。