如何制作一个 React 下拉菜单来呈现用户点击的数组并显示“这里没有找到！”如果数组为空？

Posted 2023-02-22

【中文标题】如何制作一个 React 下拉菜单来呈现用户点击的数组并显示“这里没有找到！”如果数组为空？

【英文标题】：How to make a React dropdown to render the array the user clicks on AND show "nothing found here!" if array is empty?

【发布时间】：2022-01-12 17:45:12

【问题描述】：

我正在尝试找出一种更好的方法来呈现此下拉列表的对象数组。 我目前可以正确查看所有数组，但是，例如，如果捕获或释放的数组为空，我会得到一个空屏幕。我尝试设置三元运算符，例如“value === capturePkm && capturePkm === '' ？这里没有找到：cappedPkm.map() 但我需要另一个：显示'released'或'all'，这就是不是三元运算符的工作方式。如果数组为空，我怎样才能在此处显示 Nothing to be found 并在用户单击它时显示另一个组件？我希望我说得足够清楚。如果没有，请告诉我所以！

import React,  useState  from "react";
import PokemonCard from "./PokemonCard";

const Dropdown = (
  pokemons,
  capturedPkm,
  releasedPkm,
  setCapturedPkm,
  setReleasedPkm,
) => 
  const [value, setValue] = useState([pokemons]);
  const handleChange = (e) => setValue(e.target.value);
  return (
    <div className="select">
      <select name=JSON.stringify(value) onChange=handleChange>
        <option value=JSON.stringify(pokemons)>All</option>
        <option value=JSON.stringify(capturedPkm)>Captured</option>
        <option value=JSON.stringify(releasedPkm)>Released</option>
      </select>
      <div
        style=
          display: "flex",
          flexWrap: "wrap",
          justifyContent: "space-evenly",
        
      >
        value === JSON.stringify(capturedPkm)
          ? capturedPkm.map((el, i) => 
              return (
                <div>
                  <img src=el.img alt="pokemon" />
                  el.name
                </div>
              );
            )
          : value === JSON.stringify(releasedPkm)
          ? releasedPkm.map((el, i) => 
              return <div>el.name</div>;
            )
          : pokemons.map((pokemon, index) => 
              return (
                <div style= width: "235px"  key=index>
                  <PokemonCard
                    pokemon=pokemon
                    index=index
                    name=pokemon.name
                    capturedPkm=capturedPkm
                    setCapturedPkm=setCapturedPkm
                    notCapturedPkm=releasedPkm
                    setNotCapturedPkm=setReleasedPkm
                  />
                </div>
              );
            )
      </div>
    </div>
  );
;

export default Dropdown;

【参考方案1】：

以防万一这对任何人都有用，我刚刚添加了一个新条件以防空数组，它可以完美运行。我将使用编辑和重构的代码上传我自己的问题 (LOL)。

【讨论】：

请不要编辑您的问题以反映您的答案！如果需要，请发布您对自己问题的答案，但不要编辑显示答案的问题。

好吗？我只是觉得它可能有用！谢谢！

是的，它肯定很有用。我们只是不希望更新问题以（也）反映答案。问题应该是（仅）一个问题，不包括答案。您可以发布自己问题的答案。你可以用“编辑和重构的代码”来做到这一点

非常感谢您的解释，这绝对是有道理的！