Unable to copy array using setstate hook

问题

I am fetching data from backend using axios whenever I am trying to update hooks it is not updating. The data is JSON from where I am extracting data and trying to set element. It might sound silly but can somebody tell me what is dependent array?

I keep getting this
Line 18: React Hook useEffect has a missing dependency: 'elements'. Either include it or remove the dependency array react-hooks/exhaustive-deps

Here is code

import React, { useEffect, useState } from 'react';
import './App.css';
import axios from 'axios';

function App() {
  const [elements, setElements] = useState([]);

  useEffect(() => {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      console.log(data);
      setElements(elements => [...elements, data]);
      console.log(elements);
    };
    res();
  }, []);
 console.log(elements.map(element => console.log(element)));
  return <div className='App'>Hello</div>;
}

export default App;

回答1:

Just console.log outside your effect. You're already using the updater version of useState

 setElements(elements => [...elements, data])

The missing dependecy warning is coming from console.log(elements)

import React, { useEffect, useState } from 'react';
import './App.css';
import axios from 'axios';

function App() {
  const [elements, setElements] = useState([]);

  useEffect(() => {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      console.log(data);
      setElements(elements => [...elements, data]);
    };
    res();
  }, []);

  console.log(elements);

  return <div className='App'>Hello</div>;
}

export default App;

回答2:

Missing dependency warning is because you use console.log(elements) inside the useEffect. And your elements log is not showing latest result because state is not changed (yet)

Just add a useEffect to keep track of elements changes like below.

 function App() {
  const [elements, setElements] = useState([]);

  useEffect(() => {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      console.log(data);
      setElements(elements => [...elements, data]);
    };
    res();
  }, []);

  useEffect(() => console.log(elements), [elements])

  return <div className='App'>Hello</div>;
}

export default App;

To answer your question;

The dependency array is their to let React know when the useEffect in this case should be triggered. So the useEffect i added, only triggers when its dependency elements is changed.

回答3:

In your case you are puting the array data inside elements, setElements(elements => [...elements, data]); so it will be array inside array. Try the below :

function App() {
  const [elements, setElements] = useState([]);
  useEffect(() => {
    const res = async () => {
      const result = await axios.get('/data');
      const data = result.data;
      console.log(data);
      setElements([...elements, data]);
    };
    res();
  }, []);

  useEffect(() => console.log(elements), [elements])

  return <div className='App'>Hello</div>;
}

export default App;

来源：https://stackoverflow.com/questions/58190458/unable-to-copy-array-using-setstate-hook

标签

javascript

reactjs

react-hooks