如何将整数从我的主应用程序传递到单独的 js 文件？

Question

所以我正在使用 React Bootstrap 编写更大的代码，并且我正在处理从后端数据库运行的下拉列表。

                  <Dropdown>
                    <Dropdown.Toggle
                      variant="success"
                      id="dropdown-basic"
                    ></Dropdown.Toggle>
                    <Dropdown.Menu>
                      <DDL options={parts} cid={7}></DDL>
                    </Dropdown.Menu>
                  </Dropdown>

DDL.js 是我解决映射从我的数据库中读取的数组然后将其列在下拉列表中的方法。

const DDL = ({ options }, cid) => {
  console.log(cid);
  const filtered = options.filter((option) => option.catID === cid);
  console.log(filtered);
  return filtered.map((option) => (
    <Dropdown.Item key={option.id} value={option.nev}>
      {option.nev}
    </Dropdown.Item>
  ));
};

export default DDL;

代码的数组部分完美运行。但是我在加载我的过滤器所需的类别 ID 时失败了。我尝试了几种方法，但它不断获得未定义的价值。你看到的是最近的一个。

Answer 1

好吧，你需要将 cid 放在大括号内，如下所示：

const DDL =  ({ options, cid})

sandbox

Answer 2

const DDL = ({ options, cid}) => {
  console.log(cid);
  const filtered = options.filter((option) => option.catID === cid);
  console.log(filtered);
  return filtered.map((option) => (
    <Dropdown.Item key={option.id} value={option.nev}>
      {option.nev}
    </Dropdown.Item>
  ));
};

Answer 3

你解构 props 的方式不对way.cid 应该在大括号内

 const DDL = ({ options ,cid}) => {
 console.log(cid);
 const filtered = options.filter((option) => option.catID === cid);
 console.log(filtered);
 return filtered.map((option) => (
<Dropdown.Item key={option.id} value={option.nev}>
  {option.nev}
</Dropdown.Item>
   ));
  };

 export default DDL;

如何将整数从我的主应用程序传递到单独的 js 文件？

How do I pass an integer from my main app into a separate js File?

javascript

arrays

undefined

reactjs

react-bootstrap