如何将一个数组与另一个使用本地存储的数组连接起来

Question

Datalist是一个数组，我正在尝试使用concat该数组来连接板Datalist数组，但是当我控制台时它没有反映。另一方面，当我分配Datalist.concat(boards)给一个变量时，它反映了示例

const newArr = Datalist.concat(boards);

console.log(newArr)

（主要代码）请帮我审查一下。提前致谢

import React, { useState, useEffect } from 'react';

import Modal from './Modal';

import { Datalist } from '../Data/Boards';

function Boards() {

  const [boards, setboards] = useState(JSON.parse(localStorage.getItem('boards')) || []);

  const [title, settitle] = useState('');

  localStorage.setItem('boards', JSON.stringify(boards));

  Datalist.concat(boards);

  console.log(Datalist);

  const handleChange = (e) => {

    settitle(e.target.value);

  };

  const handleSubmit = () => {

    if (title.length === 0) {

      return;

    }

    setboards((prev) => [...prev, title]);

  };

  return (

    <div>

      <ul id="boards">

        <BoardList boards={boards} />

      </ul>

      <Modal title={title} handleChange={handleChange} handleSubmit={handleSubmit} />

    </div>

  );

}

function BoardList({ boards }) {

  const history = useHistory();

  return (

    <>

      {boards.map((board, index) => (

        <li

          key={index}

          onClick={() => {

            history.push('./workspace');

          }}

        >

          <h3>{board}</h3>

        </li>

      ))}

    </>

  );

}

export default Boards;

Answer 1

这是预期的行为。该concat函数不会改变原始数组。您可以在MDN 文档中阅读相关内容对于你的情况，你应该能够做到Datalist = Datalist.concat(boards);并且它应该像你期望的那样工作