太多的重新渲染。 React 限制渲染次數防止死循環 | 反應原生

Question

我有以下代碼：

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

import React, { useState, useEffect } from 'react';



const App = () => {

const [articles, setArticles] = useState([]);
const [loading, setLoading ] = useState(false);
setArticles([{"flight_number":110," ...])
useEffect(()=>{
  setLoading(true);
  var requestOptions = {
    method: 'GET',
    redirect: 'follow'
  };
  fetch("https://api.spacexdata.com/v3/launches/upcoming", requestOptions)
  .then(response => response.text())
 

  //.then(setArticles(response => result))
 .then(result => console.log(result))

 .catch(error => console.log('error', error));

 setLoading(false);

} , []);

if (loading){
    return <></>
  } else {
    return <HomeScreen articles = { articles }/>
 }
};
const HomeScreen = (props) => {
     console.log("articles: ", props.articles);
     return (
      <View>
        {
          props.articles.map((article, index)=>{
            return <Text key = {index}>
            { article.mission_name }
            </Text>
            })
          }
        </View>
      );
    }
 
  export default App;

我試圖調用 setArticles 導致重新渲染太多。 React 限制渲染次數以防止無限循環

此錯誤位於：在 App（由 ExpoRoot 創建）中 ExpoRoot（在 renderApplication.js:45）中 RCTView（在 View.js:34）中 在視圖（在 AppContainer.js:106）中在 RCTView（在 View.js :34) 在視圖中 (在 AppContainer.js:132) 在 AppContainer (在 renderApplication.js:39)...

Answer 1

您應該將初始化移動到useState掛鈎，觸發 inifite 重新渲染

const App = () => {
  // GOOD, initialize once
  const [articles, setArticles] = useState([{"flight_number":110," ...]);

  // BAD, rerender loop
  setArticles([{"flight_number":110," ...]);
...
}

Answer 2

下面是工作代碼。 對 fetch 方法和 UseSate 方法進行了一些更改。

渲染錯誤setArticles([{"flight_number":110,"...])" 。

And to have the response to be loaded into the View tag, the JSON response needs to be parsed before using it.


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

import React, { useState, useEffect } from 'react';



const App = () => {

const [articles, setArticles] = useState([{"flight_number":110}]);
const [loading, setLoading ] = useState(false);
useEffect(()=>{
  setLoading(true);
  var requestOptions = {
    method: 'GET',
    redirect: 'follow'
  };
  fetch("https://api.spacexdata.com/v3/launches/upcoming", requestOptions)
  .then(response => response.text())
 

  //.then(setArticles(response => result))
 .then(result => 
  setArticles(JSON.parse(result)))

 .catch(error => console.log('error', error));

 setLoading(false);

} , []);

if (loading){
    return <></>
  } else {
    return <HomeScreen articles = { articles }/>
 }
};
const HomeScreen = (props) => {
     console.log("articles: ", props.articles.length);
     return (
      <View>
        {
          props.articles.map((article, index)=>{
            return <Text key = {index}>
            { article.mission_name }
            </Text>
            })
          }
        </View>
      );
    }
 
  export default App;