将数组从一个UseState传递到另一个UseState

Question

我目前正试图弄清楚如何通过两个不同的组件将数组从一个useState对象传递到另一个。在我的第一个useState中，我有一个名为imagesOriginal的数组，它被动态地填充到各种不同图像的文件路径，如下所示：

[
"https://source.unsplash.com/WLUHO9A_xik/900x900",
"https://source.unsplash.com/R4K8S77qtwI/900x900",
"https://source.unsplash.com/jJGc21mEh8Q/900x900"
]

在我的App.js中，我这样构造它。

import React, { useCallback, useState } from 'react';
import ShowImage from './ShowImage.jsx';
import DropBox from './DropBox.js';
function App() {
const [imagesOriginal, setImages] = useState([]);
const onDrop = useCallback((acceptedFiles) => {
acceptedFiles.map((file, index) => {
const reader = new FileReader();
reader.onload = function (e) {
setImages((prevState) => [
...prevState,
{ id: index, src: e.target.result },
]);
};
reader.readAsDataURL(file);
return file;
});
}, []);
return (
<div className="App">
<div class="parent">
<div>
<h3>Originals</h3>
<DropBox onDrop={onDrop} />
<ShowImage images={imagesOriginal}/>
</div>
</div>
</div>
);
}
export default App;

主要问题出现在ShowImage.jsx中，我想将图像数组传递给另一个useState，因为我需要同时使用数组和setItems以新的顺序对数组进行排序。

import React, { useState } from 'react';
import {
DndContext,
closestCorners,
MouseSensor,
TouchSensor,
DragOverlay,
useSensor,
useSensors,
} from '@dnd-kit/core';
import "./ShowImage.css"
import {arrayMove, SortableContext} from '@dnd-kit/sortable';
import {SortablePhoto} from './SortablePhoto.jsx';
const ShowImage = ({images}) => {
const [items, setItems] = useState([]);
setItems([...images]);
const [activeId, setActiveId] = useState(null);
const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
return(
<div class="scroll">
<DndContext
sensors={sensors}
collisionDetection={closestCorners}
onDragStart={handleDragStart}
onDragOver={handleDragOver}
onDragEnd={handleDragEnd}
onDragCancel={handleDragCancel}
>
<SortableContext items={items} strategy={() => {}}>
<div columns={1}
style={{
display: "grid",
gridAutoRows: `100px`,
gridGap: 10
}}
>
{items.map((url, index) => (
<SortablePhoto key={url.src} url={url.src} index={index}/>
))}
</div>
</SortableContext>
</DndContext>
</div>
);
function handleDragStart(event) {
setActiveId(event.active.id);
}

function handleDragOver(event) {
const {active, over} = event;

if (active.id !== over.id) {
setItems((items) => {
const oldIndex = items.indexOf(active.id);
const newIndex = items.indexOf(over.id);

return arrayMove(items, oldIndex, newIndex);
});
}
}

function handleDragEnd(event) {
setActiveId(null);
}

function handleDragCancel() {
setActiveId(null);
}
};
export default ShowImage;

我尝试过使用行setItems([...images]);来尝试传入新项，也尝试过使用const [items, setItems] = useState(images);，但似乎从未更新items数组。我可能在做一些非常愚蠢的事情，但任何帮助都将不胜感激。

Answer 1

您可以在App组件中创建一个函数来包装setItems状态修饰符，并将此函数作为道具传递给嵌套的ShowImage组件，在那里您可以使用它来操作状态。这样，您就不需要维护两种不同的状态。

// App.js
function App() {
const [imagesOriginal, setImages] = useState([]);
const setImagesWrapper = useCallback(val => {
setImages(val);
}, [setImages]);
//...
return (
<div className="App">
<div class="parent">
<div>
<h3>Originals</h3>
<DropBox onDrop={onDrop} />
<ShowImage 
images={imagesOriginal} 
setImages={setImagesWrapper}
/>
</div>
</div>
</div>
);
}
export default App;

// ShowImage.js
const ShowImage = ({ images, setImages }) => {
const [activeId, setActiveId] = useState(null);
const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
// ...
};
export default ShowImage;