如何将DropdownList选择的项目id值包含到Api函数中，以使用React中的Axios从DB中提取另一个表

Question

我是React的新手，很抱歉把问题搞砸了。

我有React with Material UI、Express、MySQL应用程序和下拉菜单，在那里我从表中提取数据；疾病"；从我的数据库中很好地显示。现在我需要从表"中提取数据；程序"；这取决于用户在下拉列表中所做的选择。可能有几种程序对几种疾病和背部都有好处，所以我创建了由id组成的中间实体。

现在，如果我按下按钮"；搜索"；并观察它抛出的问题：

警告：列表中的每个子项都应该有一个唯一的"；键"；道具

检查DropDiseases的渲染方法。看见https://reactjs.org/link/warning-keys了解更多信息。我读了链接，但我不确定我是如何意识到的。感谢您的帮助！

//  TODO Extract list of diseases from db into dropdown list
function DropDiseases() {
const [diseases, setDiseases] = useState([]);
const loadData = async () => {
const response = await axios.get("http://localhost:4000/diseases/all/et");
setDiseases(response.data);
};
useEffect(() => {
loadData();
}, []);
console.log(diseases);
//////////////////////////////////////////////////////////////////////////////
// TODO Extract data from DB depending on selected value in Dropdown
const [procedures, setProcedures] = useState([]);
const loadProcedures = async () => {
const result = await axios.get(
"http://localhost:4000/procedures/procedures_diseases"
);
setProcedures(result.data);
};
return (
<Grid container spacing={5}>
<Grid item xs={6}>
{/* ----------------------------------------------------------------------- */}
{/* Dropdown element */}
<Autocomplete
multiple
id="checkboxes-tags-demo"
options={diseases}
disableCloseOnSelect
getOptionLabel={(option) => `${option.dis_title_et}`}
renderOption={(props, option, { selected }) => (
<li {...props}>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{[option.dis_title_et]}
</li>
)}
style={{ width: 500 }}
renderInput={(params) => (
<TextField {...params} label="Haigused" placeholder="Favorites" />
)}
/>
</Grid>
{/* --------------------------------------------------------------------------- */}
{/* Fetching Procedures data from DataBase */}
<Grid style={classes.extractData} item xs={6}>
<Button spacing={5} onClick={loadProcedures} variant="contained">
Search
</Button>
{procedures.map((val, key) => {
return (
<Grid item xs={6}>
<Typography variant="h6">
Procedure{procedures.proc_title_et}
</Typography>
<Typography variant="body1">body1 </Typography>
</Grid>
);
})}
</Grid>
</Grid>
);
}
export default DropDiseases;
```
On Sever there is structure conrollers, models and routes files
in Models I make such query
```
static findAllProceduresOnDiseases() {
let sql = `Select proc_title_et, proc_descr_et, proc_duration, proc_price FROM procedures 
INNER JOIN procedures_diseases ON procedures.id=procedures_diseases.procedures_id 
INNER JOIN diseases ON procedures_diseases.diseases_id=diseases.id;`;
return db.execute(sql);
}

我应该在SQL子句中包括所有内部联接WHERE(以包括diseases.id=${diseases.id}(和从下拉列表中捕获的"disease"id的控制器中吗

Answer 1

问题是由以下映射方法引起的：

{procedures.map((val, key) => {
return (
<Grid item xs={6}>
<Typography variant="h6">
Procedure{procedures.proc_title_et}
</Typography>
<Typography variant="body1">body1 </Typography>
</Grid>
);
})}

对于您输出的每个网格项，它必须有一个键属性，其中的值是唯一的。如果您可以在SQL查询中添加一个唯一的id来使用，那就太好了！

你的环形物品需要钥匙，所以反应可以区分每一个。例如，如果每一行都是一个组件，那么每一行可以有自己的状态/道具等，因此拥有唯一的键可以防止出现问题。

所以一旦你们有了你们的身份证(你们可以用钥匙，但它通常是不受欢迎的？(它只是：

<Grid item xs={6} key={THE_UNIQUE_ITEM_ID_HERE}>

这将解决问题。