React.js function component useState related questions

Question

I want to access state data.

How do I copy an array object I have into a data array?

enter image description here

-code

function TableList() {

  const [state, setState] = React.useState({
    columns: [
      { title: '로트번호', field: 'lote_id' },
      { title: '중량(kg)', field: 'item_weight' },
      { title: '수량', field: 'item_quantity' },
      { title: '제품코드', field: 'item_code' },
      { title: '제품명', field: 'item_name' },
      { title: '규격', field: 'standard' },
      { title: '재질', field: 'material' },
      { title: '공정명', field: 'process_name' },
      { title: '단중', field: 'unitweight' },
      { title: '납기일시', field: 'duedate' },
      { title: '단가', field: 'item_cost' },
      { title: '금액', field: 'item_price' },
    ],
    data: [],
  });


  useEffect(() =>{
    console.log("실행")
    console.log(state.data);

    axios.get('http://localhost:8080/api/item/1')
    .then( response => {
         //I want to copy the data of my output.list to state.data.
    })
    .catch( response => {
      console.log(response);
    })
  });

I want to copy my axios response data into the data array declared as useState. Please tell me the most effective way.

How do I access the second argument, state.data?
I want to access and put my output.list response data.

Not quite sure what you are after. Could you provide an example of the desired output? — T. Short
– T. Short, Commented Dec 27, 2019 at 0:35
You mean you want to copy columns or some other array into data? — Chris B.
– Chris B., Commented Dec 27, 2019 at 0:40

Chris B. · Accepted Answer · 2019-12-27 00:45:10Z

1

Not totally clear on what you're looking for, but if you just want to update the data prop on your state object, you can do it like this:

const arrayOfObjects = [{ id: 1 }, { id: 2 }];
const newState = Object.assign({}, state);
newState.data = arrayOfObjects;
setState(newState);

answered Dec 27, 2019 at 0:45

Chris B.

5,7711 gold badge17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

doan kim Over a year ago

Thank you By the way axios.get ('http: // localhost: 8080 / api / item / 1') .then (response => { //console.log(response); var output = response && response.data; const newState = Object.assign ({}, state); newState.data = output.list; setState (newState); }) .catch (response => { console.log (response); }) When you write it like this, the output occurs several times.

Chris B. Over a year ago

You'd need to post the full code for the component to see where/how you are calling it.

doan kim Over a year ago

useEffect(() =>{ console.log("실행") console.log(state.data); axios.get('localhost:8080/api/item/1') .then( response => { //console.log(response); var output = response && response.data; const newState = Object.assign({}, state); newState.data = output.list; setState(newState); }) .catch( response => { console.log(response); }) });

doan kim Over a year ago

What function does the mounted () function of Vue.js in React.js?

Chris B. Over a year ago

Please add it to your answer, it's very tough to read like that.

|

natalie · Accepted Answer · 2019-12-27 00:46:02Z

0

This is not a great way to use useState.

const [columns,setColumns] = React.useState([bla,bla]);
const [data, setData] = React.useState([bla, bla]);

You should declare your state variables separately like above.

answered Dec 27, 2019 at 0:46

natalie

2041 silver badge4 bronze badges

Comments

doan kim · Accepted Answer · 2019-12-27 01:05:55Z

0

  useEffect(() =>{
    console.log("실행")
    console.log(state.data);

    axios.get('http://localhost:8080/api/item/1')
    .then( response => {
      //console.log(response);
      var output = response && response.data;

      const newState = Object.assign({}, state);
      newState.data = output.list;
      setState(newState);
    })
    .catch( response => {
      console.log(response);
    })
  });

I want to call it just once like the mounted function

answered Dec 27, 2019 at 1:05

doan kim

251 silver badge8 bronze badges

Collectives™ on Stack Overflow

React.js function component useState related questions

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related