Mysql 使用Fetch API Use Effect-ReactJS删除行

我试图根据输入的产品代码删除一行，我有两个功能，一个用于搜索，另一个用于删除

搜索功能

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>

{poName&&poName.length(
poName.map（行=>(
{row.idaddproducts}
{row.productName}
{row.productId}
{row.productBrand}
{row.productQuantity}
{row.productPrice}
{row.productType}
))
) : (
找不到
)}

因此，当我将handleSubmit函数直接添加到handleName中时，它会在我键入时被删除，因此我必须创建单独的函数作为HandleN并调用handle submit，这样当我单击按钮时它就会执行

相反，sql作为错误抛出：

ER\u截断\u错误\u值：截断不正确的双精度值： “未定义”

或

错误：ER\U截断\U错误\U值：截断错误的双精度值： “[对象]%20[对象]”

有什么帮助吗？

导出默认函数DeleteProductsForm（）{
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>
  );
}

常量初始状态={
IDADD产品：“，
产品名称：“”，
产品ID:“”，
产品品牌：“，
产品数量：“，
产品价格：“，
产品类型：“
};
const[values，setValues]=React.useState（initialState）；
常量handleName=e=>{
const idAddProducts=e.target.value；
控制台日志（IDADD产品）；
e、 预防默认值（）；
setValues（{…values，[e.target.name]：idAddProducts}）；
handleList1（IDADD产品）；
console.log（值）；
};
常数handleN=e=>{
const idAddProducts=values.idAddProducts；
控制台日志（IDADD产品）；
e、 预防默认值（）；
setValues（{…values，[e.target.name]：idAddProducts}）；
手工列表（IDADD产品）；
console.log（值）；
};
异步函数handleList1（idAddProducts）{
const res=等待取数(
"http://localhost:4000/productslist/“+IDADD产品
);
const data=wait res.json（）；
设置值（data.data）；
console.log（data.data）；
}
useffect（（）=>{
handleList1（）；
}, []);
异步函数handleList（idAddProducts）{
const res=等待取数(
"http://localhost:4000/productslist/delete/“+IDADD产品
);
const data=wait res.json（）；
设置值（data.data）；
console.log（data.data）；
}
useffect（（）=>{
handleList（）；
}, []);
const classes=useStyles（）；
返回(
handleName（e）}
/>
handleN（e）}>单击
{values&&values.length(
values.map（行=>{row.productName}）
) : (
找不到
)}
);
}

如果我删除handleList1函数，它可以正常工作。。但它不会显示数据