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

Question

您好我正在尝试将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的最后一行if setTest一次？ n在某些 function 中发生变化，我将其设为 1 或 0。这就是我在另一个文件中导入exportTest的import {exportTest} from './App.js';

Answer 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。

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

Answer 2

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

来自 reactjs.org：

setState 是做什么的？

setState() 计划对组件的 state object 进行更新。 当 state 发生变化时，组件通过重新渲染来响应

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

  useEffect(() => {
    // componentWillMount

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

触发道具更新：

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

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

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