javascript - 如何通过navigationOptions内部的文本输入来更新本机组件的状态？(How to update the state for react native component from a text input inside the navigationOptions?)

Question

I want to set the searchValue state whenever onChangeText event fires, and I want to make the value of the text input equal to the value of the state.(每当onChangeText事件触发时，我都希望设置searchValue状态，??并且我想使文本输入的值等于状态的值。)

I a trying to do that using the navigation setParam and getParams functions.(我试图使用导航setParam和getParams函数来做到这一点。) It does work, but the problem is that the component re render two times with each keystroke.(它确实可以工作，但是问题在于该组件在每次击键时都会重新渲染两次。) Here is my code:(这是我的代码：) import React, { useState, useEffect } from "react"; import { View, StyleSheet, TextInput, FlatList } from "react-native"; import { useSelector } from "react-redux"; import { Ionicons } from "@expo/vector-icons"; import { TouchableOpacity } from "react-native-gesture-handler"; import Icon from "react-native-vector-icons/MaterialCommunityIcons"; import ProductItem from "../components/shop/ProductItem"; const SearchScreen = props => { const [searchValue, setSearchValue] = useState(""); const products = useSelector(state => state.products.products); const promotionProducts = useSelector( state => state.products.promotionProducts ); const textValue = props.navigation.getParam("textValue"); useEffect(() => { setSearchValue(textValue); }, [textValue]); useEffect(() => { props.navigation.setParams({ searchValues: searchValue }); }, [searchValue]); console.log(searchValue); return ( <View> <FlatList columnWrapperStyle={styles.row} numColumns={3} data={products} keyExtractor={item => item.id} renderItem={itemData => ( <ProductItem id={itemData.item.id} image={itemData.item.mainImage} title={itemData.item.title} price={itemData.item.price} promotion={promotionProducts} weightVolumeValue={itemData.item.weightVolumeValue} weightVolumeUnit={itemData.item.weightVolumeUnit} onSelect={() => selectItemHandler(itemData.item.id, itemData.item.title) } /> )} /> </View> ); }; SearchScreen.navigationOptions = navData => { return { headerTitle: ( <View style={styles.searchContainer}> <TextInput style={styles.searchInput} placeholder="???? ???" placeholderTextColor="white" value={navData.navigation.getParam("searchValues")} onChangeText={text => navData.navigation.setParams({ textValue: text }) } /> <Icon name="magnify" size={25} style={styles.searchIcon} /> </View> ), headerStyle: { backgroundColor: "#96B1AD" }, headerLeft: ( <TouchableOpacity onPress={() => navData.navigation.goBack()}> <Ionicons name="ios-arrow-back" size={25} color="white" style={styles.backIcon} /> </TouchableOpacity> ) }; }; const styles = StyleSheet.create({ row: { flex: 1, justifyContent: "space-between" }, searchContainer: { flexDirection: "row", backgroundColor: "#334B48", flexDirection: "row", flex: 1, alignItems: "center", marginBottom: 10 }, searchIcon: { color: "white", padding: 5 }, searchInput: { flex: 1, textAlign: "right", fontFamily: "cairo-regular", fontSize: 18, color: "white" }, backIcon: { paddingLeft: 15, marginBottom: 10 } }); export default SearchScreen;   ask by Ali Zuhair translate from so

Answer 1

You're getting the double render because you're rerendering on the update of the searchValue in one useEffect, and updating the navigation prop in the next.(之所以得到双重渲染，是因为您要在一个useEffect中更新searchValue的值，然后在下一个useUffect中进行更新。)

Try coupling those changes in one useEffect,(尝试将这些更改结合在一起使用，) useEffect(() => { setSearchValue(textValue); props.navigation.setParams({ searchValues: textValue }); }, [textValue]);