使用 useEffect 挂钩获取的项目列表仅在使用 useEffect 过滤后才会呈现

Question

我的问题是我尝试使用 useEffect 和 useState 挂钩在第一次渲染时显示数据（项目列表），并且在渲染后我想过滤这些映射的项目。

在我进入项目页面的那一刻，我在页面上呈现了零个项目。并且只有在我过滤它们之后才会呈现它们（通过搜索过滤器或从选择下拉列表中选择所需的颜色）。

下面是我的代码：

...
  var [searchTerm, setSearchTerm] = useState<any>("");
  var [searchResults, setSearchResults] = useState<any>([]);
  const handleInput = (e: any) => {
    console.log(e.target.value);
    setSearchTerm(e.target.value);
  };
  var [pickedColor, setPickedColor] = useState<any>("");
  var [colorPickResults, setColorPickResults] = useState<any>([]);
  const handleColorChange = (e: any) => {
    console.log(e.target.value);
    setPickedColor(e.target.value);
  };
  var [items, setItems] = useState<any>([]);
  useEffect(() => {
    var message: string = "";
    var fetchItems = () => {
      axios
        .get("/api/products")
        .then((res: any) => {
          console.log("res :", res);
          setItems(res.data.data[0].products);
          console.log("res.data.data[0].products :", res.data.data[0].products);
          if (res.status === 200) {
            message = "Products successfuly fetched.";
            console.log(message);
          } else {
            message = "Something went wrong. Please try again later.";
            console.log(message);
          }
        })
        .catch((err: any) => console.log(err));
    };
    fetchItems();
    const resultsFromSearch = items.filter((item: any) =>
      item.title.toLowerCase().includes(searchTerm)
    );
    setSearchResults(resultsFromSearch);
    const resultsFromPickedColor = resultsFromSearch.filter((item: any) =>
      item.color.toLowerCase().includes(pickedColor)
    );
    setColorPickResults(resultsFromPickedColor);
  }, [searchTerm, pickedColor]);
  var filteredItems = colorPickResults;
  var itemList = filteredItems.map((item: any) => {
    return (
      <div key={item.id} style={{ width: "370px", padding: "1rem" }}>
...

我在控制台中收到成功消息，并且如上所述成功获取项目。

我尝试过的： 1.将“items”添加到：[searchTerm,pickColor,items] 数组，但随后 useEffect 在获取项目时创建无限循环，并且（可能）在每次获取时重新渲染组件。

我可以更改哪些内容来获得帖子开头提到的所需功能？ 我应该添加一些其他的钩子，比如 useContext、useMemo 吗？或者也许我可以以某种方式将提取与过滤分开？

Answer 1

调用异步函数并尝试访问稍后将返回的数据将永远无法按预期工作

fetchItems();
const resultsFromSearch = items.filter((item: any) =>
  item.title.toLowerCase().includes(searchTerm)
);

您应该将该代码添加到 .then 内的 fetchItems 或者可能有单独的 useEffect：

useEffect(() => {
const resultsFromSearch = items.filter((item: any) =>
      item.title.toLowerCase().includes(searchTerm)
    );
setSearchResults(resultsFromSearch);
}, [items])

对我来说，第二个选项更具声明性和灵活性，但这取决于您