javascript - 限制 React useEffect 中显示的结果

Question

我有一些 React 代码正在过滤我的数组并根据用户搜索的内容显示结果：

function App() {
  const [countries, setCountries] = useState([]);
  const [loading, setLoading] = useState(false);
  const [search, setSearch] = useState("");
  const [filteredCountries, setFilteredCountries] = useState([]);

  useEffect(() => {
    setLoading(true);
    axios
      .get("https://www.countriesapi.com")
      .then((res) => {
        setCountries(res.data);
        setLoading(false);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  useEffect(() => {
    setFilteredCountries(
      countries.filter((country) =>
        country.name.toLowerCase().includes(search.toLowerCase())
      )
    );
  }, [search, countries]);

  if (loading) {
    return <p>Loading countries...</p>;
  }

  return (
    <div className="App">
      <h1>Countries Lists</h1>
        <a
          style={{ color: "red" }}
          target="_blank"
          href="https://www.somesite.com"
        >
        </a>
      <input
        type="text"
        placeholder="Search Countries"
        onChange={(e) => setSearch(e.target.value)}
      />
      {filteredCountries.map((country, idx) => (
        <CountryDetail key={idx} {...country} />
      ))}
    </div>
  );
}

我的国家/地区列表有 500 个结果，因此在用户编写整个search术语之前将它们全部放在页面中是不可行的。

假设页面中只有 10 个结果，而不是全部 500 个，我该如何显示？

谢谢

注意：如果您想查看一个实时示例，我的代码已被此镜像

标签： javascriptreactjs

Answer 1

您只能使用Array.prototype.slice()10 个元素。

{filteredCountries.slice(0, 10).map((country, idx) => (
    <CountryDetail key={idx} {...country} />
))}