React.js “useEffect” 不定式循环

Question

I'm using a function which needs to update data table and gets values from an API using fetch. When the page uploads, data comes perfectly with useEffect but i want it to be uploaded when i delete or add item into the table which doesn't work right now as it goes into infinitive loop.

const [data,setData] = useState();


 useEffect(() => {
   
   PersonService.getAllPersonList()
   .then(res => {
     setData(res)
     console.log(res)
   }
 )
 }, [data]); 

Answer 1

Take a step back and consider what you are semantically telling the code to do. useEffect basically means, "Perform this operation whenever this dependency has changed."

What is the operation in your case?

• Populate the data state value.

And what is the dependency?

• The data state value.

So you're telling the code to populate data (an operation which by definition changes data ) any time data has changed.

Why?

Since the only dependency is data then it sounds like you just want this to happen once when the component is first mounted. For that you would use an empty dependency array:

useEffect(() => {
  // your operation
}, []);

After that, any time data has changed then why are you re-fetching data ? Your local copy has changed. Do you not want to retain those changes? Did you also change the data on the server and want to completely refresh everything? In either event, this isn't the approach you'd want to use.

Most likely, whichever operation modified the source of data on the server should return the updated data and the client-side code which invoked that operation can then update data with that returned value.

Answer 2

Your useEffect is subscribed to ' data ', which you are also updating in the useEffect.

When ' data ' updates, the useEffect runs. Because the useEffect is updating ' data ' you have an infinite loop.

If you want the useEffect to only run once on load, simply remove the data subscription from the useEffect.

useEffect(() => {
   
   PersonService.getAllPersonList()
   .then(res => {
     setData(res)
     console.log(res)
   }
 )
 }, []);