如何从React中的两个子组件获取状态

Question

我有一个选项卡模态对话框，在我的选项卡之一，我渲染两个图像列表组件。每个组件都管理一个基于父组件中定义的一些道具的图像对象数组。在我的对话框中，我有一个保存按钮，我需要调用后端api来更新或删除图像列表组件中的任何图像状态。例如

function MyItem() {
function handleSave() {
// How would I get the state from my ImageList components?
}
//other handlers
return ( 
<TabPanel index={0} title="Detail">
<HeaderWithSaveButton onSaveClick={handleSave} />
<SomeTextContent/>
</TabPanel>
<TabPanel index={1} title="Images"> 
<ImageList key="banner" /> 
<ImageList key="icon" />
</TabPanel>
)
}

ImageList组件在一个数组中维护它们自己的状态，关于添加或删除的图像。

function ImageList({key}) {
const [images, setImages] = useState([{imageKey: key, url:`/images/${key}`, fileData: null}])

function handleImageSelected(image){
setImages() // add image
}
// other handlers
return ( 
<ImageUploader/>
<SortedImageList images={images} />
)
}

我有图像列表工作，但显然状态是本地的每一个，所以我没有办法访问它在父的保存按钮在Item组件。

这是我可以使用上下文吗?是否必须有两个上下文将被合并?如果我将状态提升到Item组件，我将如何跟踪这两个数组?而且，道具组件已经变得臃肿了。

但基本的问题是一种方法来管理状态在两个图像列表，但访问它的父，所以我可以弄清楚什么需要发送到api时，他们保存。

Answer 1

您可以向每个组件传递状态更新函数，以允许它们更新父组件的状态。我不确定这是不是一个特别"React-y"的方式，但像这样:

function MyItem() {
const [imageState, setImageState] = useState({});
function handleSave() {
// Use imageState to access the images
}
//other handlers
return ( 
<TabPanel index={0} title="Detail">
<HeaderWithSaveButton onSaveClick={handleSave} />
<SomeTextContent/>
</TabPanel>
<TabPanel index={1} title="Images"> 
<ImageList key="banner" setImageState={setImageState} /> 
<ImageList key="icon" setImageState={setImageState} />
</TabPanel>
)
}

然后你的ImageList组件可以使用传递的状态设置器通知父组件:

function ImageList({key, setImageState}) {
const [images, setImages] = useState([{imageKey: key, url:`/images/${key}`, fileData: null}])

function handleImageSelected(image){
setImages() // add image
setImageState((current) => {
return {
...current,
[key]: image,
}
})
}
// other handlers
return ( 
<ImageUploader/>
<SortedImageList images={images} />
)
}

另一个解决方案是`引发'父组件的状态