Put results of a Get request from axios to an array

Question

I don't understand a very simple task, I made a request from a API with axios in react. If I console log the res.data, is like 170 result of single objects on my console.

I need to convert all these result in a single array of objects.

It's a basic task but I don't understand how to do it.

The application is a Trello Clone.

I have a variable called board that has all the data and with this list request, I grab all the column the the trello and append to ListObjects [] in newBoardData (it's a clone of board)

Here is my code:

//Get Request

const getList = async (id) => {
  try {
  return await axios.get(`${ENDPOINT}/lists/${id}`);
  } catch (err) {
    console.log(err);
  }
};



  const [loading, setLoading] = useState(false);
  // Use Effect for grab the data with the listId 

  useEffect(() => {
      (async () => {
          setLoading(true);
          const res = await (getList(listId));
          //Loading up the listObjects
           const oldList = board.board.listObjects
           const newList = []
          const payload = res.data;
           //Adding all the old values to the new list (except for the current payload id)
          for(let obj of oldList){
          if(obj._id !== payload._id) newList.push(obj)
           } 
             //Adding the current payload id
           newList.push(payload)  
          const data = {
            ...board,
            board: {...board.board, listObjects: newList}
          };
          setList(res.data);

          // Here I put the data objects with the new ListObjects Array
          setBoardNew(data);

          setLoading(false);
      })();
  }, []);

Here is the console log of the get request res.data:

console.log of res.data

here is the board object:

board object

You can saw that there is a spam of result with the current res.data in ListObjects

I'think it make a request for every card in every list.

thank you very much!

UPDATE:

I will explain how the app works:

I have a file called Board.js, where I make this call (in the console log I have two call if I have two columns):

    try {
    return await axios.get(`${ENDPOINT}/boards/${id}`);
    } catch (err) {
      console.log(err);
    }
  };

  useEffect(() => {
      (async () => {
          setLoading(true);
          const res = await (getUserBoard(match.params.id));
          if (res) {
            axios.defaults.headers.common['boardId'] = match.params.id;
            
          } else {
            delete axios.defaults.headers.common['boardId'];
          }
          
          const payload = { ...res.data, listObjects: [], cardObjects: [] };
          const data = {
            ...state,
            board: { ...state.board, ...payload },
          };
          setBoardData(data);
          setLoading(false);
      })();
  }, []);

Then I send the props data to the file List.js

 {board.board.lists.map((listId, index) => (
               
                  <List key={listId} listId={listId} index={index} board={board} />

The list file send the data to card.js

 {list.cards.map((cardId, index) => (
                    <Card key={cardId} cardId={cardId} list={list} index={index} board={boardNew} />

The logic is: There is the board(board.js), in the board there are the lists (column)(list.js) in the lists there are the cards (card.js)

I hope it's more clear.

Answer 1

simple use this approach to add your new id value into the array state.

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array