React.js 函數組件 useState 相關問題

Question

我想訪問狀態數據。

如何將我擁有的array object復制到data array ？

-代碼

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);
    })
  });

我想將我的 axios 響應數據復制到聲明為 useState 的數據數組中。 請告訴我最有效的方法。

1. 如何訪問第二個參數 state.data？

2. 我想訪問並放置我的 output.list 響應數據。

Answer 1

不完全清楚您在尋找什么，但如果您只想更新狀態對象上的data道具，您可以這樣做：

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

Answer 2

這不是使用 useState 的好方法。

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

您應該像上面一樣單獨聲明您的狀態變量。

Answer 3

  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);
    })
  });

我想像掛載的函數一樣調用它一次