mysql - 使用 Fetch API 使用效果删除一行 - ReactJS
问题描述
我试图根据输入的产品代码删除一行,我有 2 个功能,一个用于搜索,另一个用于删除..
搜索功能
const handleName = e => {
const idAddProducts = e.target.value;
e.preventDefault();
pnName({ ...poName, idaddproducts: idAddProducts });
handleTable(idAddProducts);
// handleSubmit(idAddProducts);
console.log(poName);
};
async function handleTable(idAddProducts) {
const id = poName.idaddproducts;
const res = await fetch(
"http://localhost:4000/productslist/" + idAddProducts
);
const data = await res.json();
pnName(data.data);
console.log(data.data);
}
useEffect(() => {
handleTable();
}, []);
另一种是删除功能
const handleN = e => {
const idAddProducts = e.target.value;
e.preventDefault();
pnName({ ...poName, idaddproducts: idAddProducts });
handleSubmit(idAddProducts);
console.log(poName);
};
async function handleSubmit(idAddProducts) {
const res = await fetch(
"http://localhost:4000/productslist/delete/" + idAddProducts
);
const data = await res.json();
pnName(data.data);
console.log(data.data);
}
useEffect(() => {
handleSubmit();
}, []);
这是我映射搜索结果的渲染部分
<TableBody>
{poName && poName.length ? (
poName.map(row => (
<TableRow key={row.idaddproducts}>
<TableCell component="th" scope="row">
{row.idaddproducts}
</TableCell>
<TableCell component="th" scope="row">
{row.productName}
</TableCell>
<TableCell align="right">{row.productId}</TableCell>
<TableCell align="right">{row.productBrand}</TableCell>
<TableCell align="right">{row.productQuantity}</TableCell>
<TableCell align="right">{row.productPrice}</TableCell>
<TableCell align="right">{row.productType}</TableCell>
</TableRow>
))
) : (
<span>Not Found</span>
)}
</TableBody>
</Table>
</TableContainer>
<div style={{ paddingBlockEnd: "0px" }}>
<Fab color="secondary" aria-label="edit" onClick={handleN}>
<EditIcon />
</Fab>
</div>
因此,当我将handleSubmit 函数直接添加到handleName 时,它会在我键入时被删除,所以我必须创建单独的函数作为HandleN 并调用句柄提交,以便当我单击按钮时它应该执行,
而是 sql 抛出错误:
ER_TRUNCATED_WRONG_VALUE:截断不正确的 DOUBLE 值:“未定义”
或者
错误:ER_TRUNCATED_WRONG_VALUE:截断不正确的 DOUBLE 值:'[object]%20[object]'
有什么帮助吗?
解决方案
export default function DeleteProductsForm() {
const initialState = {
idaddproducts: "",
productName: "",
productId: "",
productBrand: "",
productQuantity: "",
productPrice: "",
productType: ""
};
const [values, setValues] = React.useState(initialState);
const handleName = e => {
const idAddProducts = e.target.value;
console.log(idAddProducts);
e.preventDefault();
setValues({ ...values, [e.target.name]: idAddProducts });
handleList1(idAddProducts);
console.log(values);
};
const handleN = e => {
const idAddProducts = values.idaddproducts;
console.log(idAddProducts);
e.preventDefault();
setValues({ ...values, [e.target.name]: idAddProducts });
handleList(idAddProducts);
console.log(values);
};
async function handleList1(idAddProducts) {
const res = await fetch(
"http://localhost:4000/productslist/" + idAddProducts
);
const data = await res.json();
setValues(data.data);
console.log(data.data);
}
useEffect(() => {
handleList1();
}, []);
async function handleList(idAddProducts) {
const res = await fetch(
"http://localhost:4000/productslist/delete/" + idAddProducts
);
const data = await res.json();
setValues(data.data);
console.log(data.data);
}
useEffect(() => {
handleList();
}, []);
const classes = useStyles();
return (
<form className={classes.root} noValidate autoComplete="off" align="center">
<div className={classes.formGroup}>
<FormControl>
<Input
type="search"
label="Product ID"
variant="outlined"
size="small"
placeholder="Enter Product Code"
value={values.idaddproducts}
name="idaddproducts"
onChange={e => handleName(e)}
/>
</FormControl>
<Button onClick={e => handleN(e)}>Click</Button>
{values && values.length ? (
values.map(row => <h5 key={row.idaddproducts}>{row.productName}</h5>)
) : (
<h5>Not Found</h5>
)}
</div>
</form>
);
}
如果我删除 handleList1 函数它工作正常.. 但它不会显示数据
推荐阅读
- java - 使用持久性实体,如键
- python - 跨目录中多个 XML 文件的循环函数,因此每个 XML 成为 CSV 中的一行
- node.js - 如何在 Mongoose 中构建动态查询?
- amazon-s3 - 何时使用 s3cmd 而不是以编程方式访问 S3 API?
- java - 使用流收集 HashMap 中的事件
- bash - 如何在 Bash 脚本中编写 3-4 提交以在 CircleCI 中启动不同类型的自动化 UI 测试?
- sql - 如何从 Array 中检索参数(BigQuery 中具有命中的 Google Analytics 表)?
- php - PHP 版本在 IIS 上不断从 7.1.1 切换到 5.4.45
- java - ScalaBuff 在解析 protobuf 文件时出错
- python - 如何让python将这两行识别为一句话