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

Question

我对如何在 React 中使用 setState by hook 将数组数据添加到对象内的数组列表感到困惑。有人可以帮我解决这个问题吗？ 下面是我的代码，每次我控制台日志它总是返回空数组。

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
}