使用 React Hook 将数据添加到对象内的数组

Question

我对如何在 React 中通过钩子使用 setState 将数组数据添加到对象内的数组列表感到困惑。有人可以帮助我吗？下面是我的代码，每次我控制台记录它总是 return 空数组。

import React, { useState } from 'react';

const Main = props => {
  const [state, setState] = useState({
    noteArray: [],
    noteText: '',
  });


  const addNote = () => {
    if(state.noteText){
      var d = new Date();
      let x = {
        'date': d.getFullYear() + 
        "/" + (d.getMonth() + 1 ) +
        "/" + d.getDate(),
        'note': state.noteText
      }

      setState({...state, noteArray: x});

      console.log(state.noteArray);
    }
  }

   .......................the rest of code
}

Answer 1

基本上你做错的是你覆盖了你的数组而不是向它添加新值。您可以使用以下方法轻松完成此操作：-

import React, { useState } from 'react';

const Main = props => {
  const [state, setState] = useState({
    noteArray: [],
    noteText: '',
  });


  const addNote = () => {
    if(state.noteText){
      var d = new Date();
      let x = {
        'date': d.getFullYear() + 
        "/" + (d.getMonth() + 1 ) +
        "/" + d.getDate(),
        'note': state.noteText
      }

      setState({...state, noteArray: [...state.noteArray, x]});

      console.log(state.noteArray);
    }
  }

   .......................the rest of code
}

使用 React Hook 将数据添加到对象内的数组

Adding data to Array inside an object using React Hook

arrays

immutability

reactjs

react-hooks