在单个视图中处理多个映射数组时出错

Question

我有两个Select输入来显示数据。假设1 Select用于产品，其他用于显示基于Select 1中所选产品的产品列表。但我犯了一个错误，react没有显示我的观点。在我命令第二个Select之后，它将正常运行。

这是我选择产品和覆盖范围的选择输入：

<div>
<Select onChange={handleChangeSelect} value={TocId} name="ProductID" size="sm">
{TOC.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
<Select onChange={handleChangeSelect} value={TocId} name="ProductID" size="sm">
{Coverage.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
</div>

在使用hooks状态选择产品之后，我通过点击api来获取覆盖率数据像这样：

const getCoverage = () => {
axios.post( url, data, headers).then(function (response){
if(response.data.Data == 'success') {
setCoverage(response.data.Data)
}
})
}
const handleChangeSelect = (e) => {
setTocId(e);
console.log(TocId);
getCoverage();
};

Answer 1

如果没有看到代码的其余部分，很难说，但您是第一次在handleChangeSelect中获取Coverage吗？

如果是这样，那就是问题所在，因为在第一次渲染中不存在"覆盖"。

一个潜在的解决方法可能是使"覆盖率"选项有条件地渲染。

<div>
<Select onChange={handleChangeSelect} value={TocId} name="ProductID" size="sm">
{TOC.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
<Select onChange={handleChangeSelect} value={TocId} name="ProductID" size="sm">
{Coverage && Coverage.length > 0 && Coverage.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
</div>

Answer 2

看起来不错。根据我的看法，这是一个空状态渲染的问题。有条件地渲染组件。另外，放置一个不同的名称道具。

<div>
<Select
onChange={handleChangeSelect}
value={TocId}
name="ProductID"
size="sm"
>
{TOC?.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>
<Select
onChange={handleChangeSelect}
value={TocId}
name="ProductID"
size="sm"
>
{Coverage?.map((type, index) => (
<Select.Option key={type.id} value={type.id}>
{type.desc}
</Select.Option>
))}
</Select>