Javascript 如何从navigationOptions中的文本输入更新react本机组件的状态？

每当触发onChangeText事件时，我想设置searchValue状态，并且我想使文本输入的值等于状态的值。我正在尝试使用导航setParam和getParams函数来实现这一点。它确实可以工作，但问题是组件在每次击键时会重新渲染两次。这是我的密码：

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;

import React，{useState，useffect}来自“React”；
从“react native”导入{View，StyleSheet，TextInput，FlatList}；
从“react redux”导入{useSelector}；
从“@expo/vector icons”导入{Ionicons}”；
从“反应本机手势处理程序”导入{TouchableOpacity}；
从“反应本机矢量图标/材料通信图标”导入图标；
从“./components/shop/ProductItem”导入ProductItem；
const SearchScreen=props=>{
常量[searchValue，setSearchValue]=useState（“”）；
const products=useSelector（state=>state.products.products）；
const promotionProducts=useSelector(
state=>state.products.promotionProducts
);
const textValue=props.navigation.getParam（“textValue”）；
useffect（（）=>{
设置搜索值（textValue）；
}，[textValue]）；
useffect（（）=>{
props.navigation.setParams（{searchValues:searchValue}）；
}，[searchValue]）；
console.log（searchValue）；
返回(
项目id}
renderItem={itemData=>(
选择ItemHandler（itemData.item.id、itemData.item.title）
}
/>
)}
/>
);
};
SearchScreen.navigationOptions=navData=>{
返回{
标题：(
navData.navigation.setParams（{textValue:text}）
}
/>
),
头型：{
背景颜色：“96B1AD”
},
左校长：(
navData.navigation.goBack（）}>
)
};
};
const styles=StyleSheet.create({
行：{
弹性：1，
为内容辩护：“之间的空间”
},
搜索容器：{
flexDirection:“行”，
背景颜色：“334B48”，
flexDirection:“行”，
弹性：1，
对齐项目：“中心”，
marginBottom:10
},
搜索图标：{
颜色：“白色”，
填充：5
},
搜索输入：{
弹性：1，
textAlign:“对”，
fontFamily：“开罗常规”，
尺码：18，
颜色：“白色”
},
背景图标：{
paddingLeft:15，
marginBottom:10
}
});
导出默认搜索屏幕；

之所以获得双重渲染，是因为在一个useEffect中更新searchValue时重新渲染，在下一个useEffect中更新导航道具。 尝试将这些更改耦合到一个useEffect中

  useEffect(() => {
    setSearchValue(textValue);
    props.navigation.setParams({ searchValues: textValue });
  }, [textValue]);

---

获得双渲染是因为在一个useEffect中更新searchValue时重新渲染，在下一个useEffect中更新导航道具。 尝试将这些更改耦合到一个useEffect中

  useEffect(() => {
    setSearchValue(textValue);
    props.navigation.setParams({ searchValues: textValue });
  }, [textValue]);

---

它不起作用。当我输入时，它不会更新文本输入的值，直到下一次渲染或击键。因此，我还添加了searchValue状态作为useEffect的依赖项。现在它显示了我键入的内容，但我也得到了双重渲染。它不起作用。当我输入时，它不会更新文本输入的值，直到下一次渲染或击键。因此，我还添加了searchValue状态作为useEffect的依赖项。现在它显示了我键入的内容，但我也得到了双重渲染。