Question

我有一个使用OnNavigatedTo的组件。不过我有问题。

该组件具有2个道具：react-native-scrollable-tabview和page。

首次渲染组件时，我应该设置initialPage，否则它将不起作用。

但是，当再次渲染组件时，如果我更改此initialPage，它将进入新页面（标签），但不会渲染它。但是，如果我设置了initialPage，它就可以工作。

所以想法是：

第一次渲染？将page设置为undefined并将page设置为N。后续渲染？将initialPage设置为N，将page设置为undefined。

我尝试使用像这样的标志状态变量：

initialPage

事实是，const [firstRender, setFirstRender] = useState(true); let page = n; let initialPage = n; if(first){ page = undefined; setFirstRender(false); }else{ initialPage = undefined; }触发了重新渲染，因此它不起作用。但是，当我转到另一个屏幕（使用反应导航）并返回时，它可以正常工作。

是否有任何方法可以在不触发重新渲染的情况下更新此setFirstRender？

Answer 1

不确定这是否是您要的内容，但是也许使用useEffect可以帮助您吗？

useEffect(() => {
  setFirstRender(false);
}, []);

最后的数组是一个依赖项，它告诉函数仅运行一次，您也可以在其中添加一个值，该值也仅在该值更改时才运行。

Answer 2

似乎您没有在任何地方检查状态的值。

例如此条件：

if(first){
   page = undefined;
   setFirstRender(false);
}else{
  initialPage = undefined;
}

应该更改为依赖于state的值，您可以声明为： (const [firstRender, setFirstRender] = useState(true);)

如此

if(firstRender){
   page = undefined;
   setFirstRender(false);
}else{
  initialPage = undefined;
}

另外，您可能需要将此条件移至useEffect中，在此条件下仅在首次初始页面呈现后才会更新。

useEffect(() => {
if (firstRender) {
setFirstRender(false) ...etc

反应避免重新渲染useState

2 个答案: