React Native useState Render Error : [Too many re-renders.]-CodePudding

This is my code:

export default function App() {
  const [onProcess, setOnProcess] = useState("normal")
  var myid = "123"

  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.npoint.io/0294bea2185268c9ac70')
    .then((response) => response.json())
    .then((json) => setData(json))
    .catch((error) => console.log('ERR :', error))
  },[]);

  for (let x in data) {
    if (data[x].client_id == myid) {
      var set = data[x].situation
      setOnProcess(set)
      console.log(data[x].situation)
      break
    }
  }
  const rt_normal = (
    <View style={styles.container}>
      <Text> This is normal view </Text>
    </View>
  )
  const rt_process = (
    <View style={styles.container}>
      <Text> This is process view </Text>
    </View>
  )

  if (onProcess == "normal") {
    return rt_normal
  }
  else if (onProcess == "_on_process") {
    return rt_process
  }
}

The error I got is:

:[Render Error. Too many re-renders. React limits the number of renders to prevent an infinite loop.]

This happens because of setOnProcess(set) code. How can I solve this?

CodePudding user response：

You should remove your for...in loop and refactor to utilise useEffect.

useEffect(() => {
  // Get a specific entry where client_id matches myId.
  const filteredItem = data.find(item => item.client_id === myId);

  // Perform a check as .find() can return undefined.
  if(filteredItem.situation) {
    setSituation(filteredItem.situation);
  }
}, [data]);

CodePudding user response：

Put the for loop inside a useEffect

(Untested) example:

useEffect(() => {
  for (let x in data) {
    if (data[x].client_id == myid) {
      var set = data[x].situation;
      setOnProcess(set);
      console.log(data[x].situation);
      break;
    }
  }
}, [data]);