如果反应原生，如何设置状态答案

【问题标题】：how to setstate in if react native如果反应原生，如何设置状态
【发布时间】：2021-04-21 22:01:48
【问题描述】：

您好，我正在尝试将 exportTest 导出到另一个 js 文件并重新渲染。我是这样试的

import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';

var n;
export var exportTest;

function foo()
{
  //doing something and giving back n as 1 or 0
}

export default function App () {

  const [test,setTest] = useState();
  if(n == 0)
  {
    //doing something
    setTest('n is zero')
  }
  else
  {
    //doing something
    setTest('n is not zero')
  }
  exportTest=test

  return(
     <View>
       ...
       ...
       ...
     </View>
  );
}

我收到错误 too meny re-renders，因为我在 if 中执行 setTest 如何在if 的最后一行执行一次setTest？ n 正在更改某些功能，我将其设为 1 或 0。这就是我在另一个文件import {exportTest} from './App.js'; 中导入exportTest 的方式@

【问题讨论】：

嗯，n 始终为 0，所以它会一遍又一遍地重新渲染。递归没有基本情况，n 始终为 0 或其他值，因此将调用 setState。每次调用 setState 时，它都会触发一个新的渲染，所以你会想要达到一个没有调用 setState 的点。说了这么多，我不太确定这个组件应该做什么。
我想在if结束时给setTest打电话

标签： javascript node.js reactjs react-native if-statement

【解决方案1】：

import React, { useState } from 'react';
import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';

export const exportTest = () => {
  
  const [test,setTest] = useState();

  let n = 0;

  if(n == 0)
  {
    setTest('n is zero')
  }
  else
  {
    setTest('n is not zero')
  }
  exportTest=test

  return(
     ...
     ...
     ...
  );
}

试试看。您将其作为 const 导入，因此您编写了 {exportTest} 导入。您需要将 exportTest 导出为 const。

有很多问题，您删除了退货，因此您的目的不明确。看看是否有帮助。随时再次发表评论。我建议清理你的代码。

【讨论】：

它不起作用，return在这里并不重要，它只是一些Views，TouchableOpacity和Text

【解决方案2】：

您正在创建一个无限循环。状态和道具更改触发重新渲染，在您的情况下 - 重新渲染触发状态更新。这就是为什么状态更新永远不应该成为渲染器逻辑的一部分。

来自 reactjs.org：

setState 有什么作用？

setState() 安排对组件状态对象的更新。什么时候状态改变，组件通过重新渲染来响应

通常，您会在 componentDidMount 或 componentWillReceiveProps 上进行所有状态操作，而 hook 的替代方法是 Effect Hook。

  useEffect(() => {
    // componentWillMount

    return () => {
      // componentWillUnmount
    };
  });

触发道具更新：

  useEffect(() => {
    // prop abc changed
  }, [props.abc]);

注意，在后一个示例中，我省略了 return 语句。

https://reactjs.org/docs/hooks-effect.html

【讨论】：