基于使用唯一 ID 搜索的渲染值 - ReactJS答案

【问题标题】：Render Values Based on Searching with Unique ID - ReactJS基于使用唯一 ID 搜索的渲染值 - ReactJS
【发布时间】：2020-04-26 22:15:12
【问题描述】：

我使用 reactjs、nodejs 和 mysql.. 从数据库中获取数据。现在我的困难是我只需要根据搜索值显示该行可能不包括提交按钮（如谷歌搜索）

这是我的 NodeJS 获取链接，所以如果我输入 http:\localhost\productlist\3，那么它将仅在 NodeJS 中显示第 3 个产品，但我想通过搜索框在 reactjs 中实现相同的功能

app.get("/productslist/:idaddproducts", (req, res) => {
  const id = req.params.idaddproducts
  console.log(id)
  connection.query("SELECT * FROM `addproducts` where idaddproducts = ? ",id,(err, rows) => {
    if (!err) console.log(rows), res.json({ data: rows });
    //data variable is not mandatory but inorder to pass the result we need it
    else console.log(err);
    // connection.end()
  });
});

这是我的反应 js 代码

export default function MaterialTableDemo() {
  const initialState = {
    idaddproducts: "",
    productName: "",
    productId: "",
    productBrand: "",
    productQuantity: "",
    productPrice: "",
    productType: ""
  };
  const [poName, pnName] = React.useState(initialState);

  const handleName = e => {
    e.preventDefault();
    pnName({ ...poName, [e.target.name]: e.target.value });
    console.log(poName);
  };

  async function handleTable(e) {
    const res = await fetch("http://localhost:4000/productslist/:id");
    const data = await res.json();
    pnName(data.data);
    console.log(data.data);
  }

  useEffect(() => {
    handleTable();
  }, []);

  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 ID"
            value={poName.idaddproducts}
            name="idaddproducts"
            onChange={handleName}
          />
        </FormControl>
        {poName.length &&
          poName.map(v => {
            return (
              <h4 key={v.idaddproducts}>
                {v.productName}
                {v.productId}
                {v.productBrand}
                {v.productQuantity}
                {v.productPrice}
                {v.productType}
              </h4>
            );
          })}
      </div>
    </form>
  );
}

任何帮助将不胜感激

【问题讨论】：

您想在搜索框中输入文本并在您的数据库中搜索并在您的 React 应用中显示这些项目吗？
没错，当我们输入它时，它应该在表格中显示可能的匹配项，或者至少我们可以添加按钮，然后我们在搜索框中输入并按 Enter 以在反应中呈现数据
想在哪里搜索该文本？产品名称，产品品牌？两者都有？
计划使用作为唯一值主键的 idaddproducts 进行搜索。如果可行，我会将相同的功能迁移到 productCode

标签： reactjs fetch-api use-effect

【解决方案1】：

async function handleTable(e) {
    const id = poName.idaddproducts;
    const res = await fetch("http://localhost:4000/productslist/" + id);
    const data = await res.json();
    pnName(data.data);
    console.log(data.data);
}

useEffect(() => {
    handleTable();
}, [poName.idaddproducts]);

尝试这样使用。

【讨论】：

e 返回什么？
当我输入 10 控制台输出是 {idaddproducts:"1"}，然后当我输入 100 控制台输出是 {idaddproducts:"10"}，并且不再获取数据
使用onBlur 事件而不是onChange
什么都没有出现......甚至在控制台中也没有
让我们continue this discussion in chat。

【解决方案2】：

检查一下，这样可以正常工作，如果没有，就会有另一个问题

【讨论】：

【解决方案3】：

它现在可以工作了......这是一段代码......感谢这两个人

export default function MaterialTableDemo() {
  const initialState = {
    idaddproducts: "",
    productName: "",
    productId: "",
    productBrand: "",
    productQuantity: "",
    productPrice: "",
    productType: ""
  };
  const [poName, pnName] = React.useState(initialState);

  const handleName = e => {
    const idAddProducts = e.target.value;
    e.preventDefault();
    pnName({ ...poName, idaddproducts: idAddProducts });
    handleTable(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 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 ID"
            value={poName.idaddproducts}
            name="idaddproducts"
            onChange={handleName}
          />
          {poName.length &&
            poName.map(v => {
              return (
                <h4 key={v.idaddproducts}>
                  {v.productName}
                  {v.productId}
                  {v.productBrand}
                  {v.productQuantity}
                  {v.productPrice}
                  {v.productType}
                </h4>
              );
            })}
        </FormControl>
      </div>
    </form>
  );
}

See ScreenShot

【讨论】：