在Reactjs中使用链接状态通过路由组件传递数据并添加到数组中

Question

在我的 Add.js 组件中，我正在获取表单数据，我通过 Link 元素将其发送到我的 List.js 组件，并使用 useLocation 来获取它。然后我创建一个新的空数组并将 listItem 推入其中。 我的问题是，当我尝试使用 Add.js 组件中的表单添加另一个项目时，List.js 中的数组被清空并仅替换为新项目。 我正在尝试添加每个添加的项目并将其保存到数组中。

我尝试创建一个新数组并使用推送来更新它。每次我切换组件时，数组都会被清空

add.js

import React from 'react';
import { useState } from 'react';
import { Link } from 'react-router-dom';

export default function Add() {

const [vanNo, setVanNo] = useState("");
const [firstItem, setFirstItem] = 
useState("");
const [secondItem, setSecondItem] = 
useState("");
const [thirdItem, setThirdItem] = 
useState("");
const [fourthItem, setFourthItem] = 
useState("");
const [fifthItem, setFifthItem] = 
useState("");

const handleChange =(e) => {
    setVanNo(e.target.value);

    setFirstItem(e.target.value);
    setSecondItem(e.target.value);
    setThirdItem(e.target.value);
    setFourthItem(e.target.value);
    setFifthItem(e.target.value);

}

return(
        <form className="add-form">
            <div className="form-content">
                <h1 className="dark-heading">Add Items</h1>
                <label>
                    <b>Van No:</b>
                    <input type="text" value={vanNo} onChange={(e) => setVanNo(e.target.value)} name="van no"/>
                </label>
                <label>
                    <b>Item:</b>
                    <input type="text" value={firstItem} onChange={(e)=>setFirstItem(e.target.value)} name="item"/>
                    <input type="text" value={secondItem} onChange={(e)=>setSecondItem(e.target.value)} name="item"/>
                    <input type="text" value={thirdItem} onChange={(e)=>setThirdItem(e.target.value)} name="item"/>
                    <input type="text" value={fourthItem} onChange={(e)=>setFourthItem(e.target.value)} name="item"/>
                    <input type="text" value={fifthItem} onChange={(e)=>setFifthItem(e.target.value)} name="item"/>
                </label>
                <Link 
                    to='/list' 
                    state={{ listItem: {
                        van: { vanNo },
                        first: { firstItem },
                        second: { secondItem },
                        third: { thirdItem },
                        fourth: { fourthItem },
                        fifth: { fifthItem }
                        }
                    }}
                    className="add-btn">
                    Add to List
                </Link>
            </div>
            
        </form>
)}

List.js

import { useState, useEffect } from 
'react';
import { useLocation } from 'react-router- 
dom';
import Add from './Add.js';

export default function List() {
const location = useLocation();

//listItem object 
const { listItem } = location.state;

const arr = [];

arr.push(listItem);
// let vanNo = van.vanNo;
// let firstItem = first.firstItem;
// let secondItem = second.secondItem;
// let thirdItem = third.thirdItem;
// let fourthItem = fourth.fourthItem;
// let fifthItem = fifth.fifthItem;
console.log(arr)

return(
    <>
    {
        arr.map(function(item, i) {
            return (
                <div className="list-item" 
                key={i}>
                    <div className="no- 
                    wrap">
                        <h3 className="van- 
                    no">{item.van.vanNo} 
                        </h3>
                    </div>
                </div>
            )
        })
     }
        
    </>
)

}

Answer 1

ParentComponent.js：

import React, { useState } from 'react';
import Add from './Add';
import List from './List';

function ParentComponent() {
  const [items, setItems] = useState([]);

  const addItemToList = (newItem) => {
    setItems([...items, newItem]);
  };

  return (
    <div>
      <Add addItem={addItemToList} />
      <List items={items} />
    </div>
  );
}

export default ParentComponent;

添加.js：-

import React, { useState } from 'react';

function Add({ addItem }) {
  const [formData, setFormData] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    addItem(formData);
    setFormData('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={formData} onChange={(e) => setFormData(e.target.value)} />
      <button type="submit">Add Item</button>
    </form>
  );
}

export default Add;

List.js：

import React from 'react';

function List({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

export default List;

通过此设置，每次在 Add.js 组件中添加新项目时，它都会调用父组件中的 addItemToList 函数，该函数会更新该项目的状态数组。