为什么在 useEffect 中创建的按钮无法正常工作答案

【问题标题】：why button which is created in useEffect doesnt work correctly为什么在 useEffect 中创建的按钮无法正常工作
【发布时间】：2021-05-03 19:40:04
【问题描述】：

我有两个按钮，它们像这样调用相同的函数：

这个按钮在useEffect中创建。

  useEffect(() => {
    navigation.setParams({
      TopRightButton: (
        <ConfirmButton
          callback={() => ApiCall()}
         
        />
      ),
    });
 
  }, []);

这是渲染中的第二个按钮

 <TouchableOpacity onPress={()=> ApiCall()}><Text>Add</Text></TouchableOpacity>

这是函数：

  const ApiCall = () => {
    console.log('name', Name);
  };

我用 useState 更改名称。当我单击第二个按钮 TouchableOpacity 时，它会显示我的名字。但是，当我单击在 useEffect 中创建的第一个按钮时，什么也没有发生。我的意思是，名称为空。为什么会这样？

有什么建议吗？

已编辑：

  const [Name, setName] = useState('');

【问题讨论】：

尝试将您的功能更改为function ApiCall(){.....}。
这行不通@GouravSaini
你需要在useEffect的依赖数组中传递Name/ApiCall。如果需要，请添加 return cleanup function。
你能告诉我我该怎么做吗？ @GouravSaini
Name 来自哪里？你能展示整个代码吗？

标签： react-native

【解决方案1】：

你会试试这个方法吗？

const ApiCall = () => {
 console.log('name', Name);
};
useEffect(() => {
navigation.setParams({
  TopRightButton: (
    <ConfirmButton
      callback={() => ApiCall()}
     
    />
  ),
});

}, [Name]);

【讨论】：

它没用 :( 我在这里给出名字。[Name] 现在可以工作了。但这是不好的方式？
是的，因为每次Name 更改时它都会重新呈现按钮。

【解决方案2】：

您应该提供有关第一个按钮的更多信息，我猜它是您想要显示在堆栈导航器标题右侧的按钮，如果是这种情况，您应该不使用@ 987654322@为此。

如果你想配置你的导航器，你应该使用navigationOptions。

因此，在您想要在其标题中添加按钮的屏幕中，您必须在 useEffect 内调用 setOptions。查看docs，了解有关如何实现这一目标的更多信息。

【讨论】：

我正在使用 react-navigation v4 :(
您仍然可以获得相同的结果，只是语法有点不同而已。在您的createStackNavigator 方法中，您应该传递第二个对象作为包含键navigationOptions 的参数，该键采用与您通常在react-navigation-v5 中传递给setOptions 的对象完全相同的对象。如果您需要任何进一步的帮助，请告诉我，我将编辑我的原始答案。