工作中经常遇到的需求总结（1）下拉框选择后刷新数据实现方案

组件封装

首先，我们需要将下拉框和数据列表组件封装成一个独立的组件。这样可以方便我们在不同的页面中复用该组件。

import React, { useState, useEffect } from "react";

const SelectData = () => {
  const [selectedOption, setSelectedOption] = useState("");
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`https://example.com/data/${selectedOption}`);
      const data = await response.json();
      setData(data);
    };

    if (selectedOption !== "") {
      fetchData();
    }
  }, [selectedOption]);

  return (
    <div>
      <select value={selectedOption} onChange={(e) => setSelectedOption(e.target.value)}>
        <option value="">Select an option</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
      </select>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default SelectData;

时间处理的函数

接下来，我们需要编写一个函数来处理时间。这个函数的作用是将字符串类型的日期转换成Date类型，并格式化为我们想要的格式。

const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString();
};

根据下拉框的选择重新获取数据

最后，我们需要编写一个函数来根据下拉框的选择重新获取数据。这个函数的作用是根据下拉框的值构建一个URL，然后使用fetch函数从服务器获取数据。

const fetchData = async (selectedOption) => {
  const response = await fetch(`https://example.com/data/${selectedOption}`);
  const data = await response.json();
  return data;
};

使用

现在，我们可以将SelectData组件添加到我们的页面中。

import SelectData from "./SelectData";

const App = () => {
  return (
    <div>
      <SelectData />
    </div>
  );
};

export default App;

当用户选择不同的下拉框选项时，SelectData组件将根据选项的值重新获取数据并刷新数据列表。

总结

以上就是实现下拉框选择后刷新数据的一种简单易行的方案。这种方案的优点是简单易懂，易于维护。缺点是如果下拉框选项很多，则需要在组件中添加更多的代码来处理不同的选项。

希望这篇博文对您有所帮助。如果您有任何问题，请随时留言。