React 数组状态作为对象返回答案

【问题标题】：React array state is being returned as objectReact 数组状态作为对象返回
【发布时间】：2022-11-12 16:32:42
【问题描述】：

我正在使用一个 MUI 自动完成字段，该字段采用一个数组作为选项。我创建了这个钩子，它接受输入值并基于它获取 API。这是它的代码：

import axios from "axios";
import { useEffect, useState } from "react";
export default function useFetchGames(searchString) {
  const [gameSearch, setGameSearch] = useState([]);

  useEffect(() => {
    if (searchString) setGameSearch(fetchData(searchString));
  }, [searchString]);

  return gameSearch;
}

const generateSearchOptions = (array) => {
  const tempArray = [];
  array.map((item) => {
    tempArray.push(item.name);
  });
  return tempArray;
};

async function fetchData(searchString) {
  const res = await axios
    .post("/api/games", { input: searchString })
    .catch((err) => {
      console.log(err);
    });

  return generateSearchOptions(res.data);
}

然后我在我有自动完成元素的组件中调用这个钩子。

const searchOptions = useFetchGames(inputValue);

问题是，useFetchGames 应该返回一个数组，因为状态是一个数组。但是每当输入发生变化时，我都会收到一个错误，即您无法过滤或映射对象。基本上自动完成元素试图映射searchOptions，但它不是一个数组。我什至尝试用log(typeof searchOptions); 记录它的类型并返回一个对象。我不明白我做错了什么。

编辑：这是res.data 的日志。它是一个对象数组。这就是为什么我将它重新映射到仅包含名称的数组的原因。

【问题讨论】：

控制台 res.data 的结果
它是一个对象数组。该代码在组件本身中实现时可以正常工作。但是我需要在其他组件中重用它，所以我决定把它做成一个钩子。我将在编辑中添加 res.data 的日志
函数fetchData(searchString) 也将返回一个承诺，而不是您期望的数据......
res.data 是一个数组。关于承诺，我该如何解决。我试图按照他们在 react 网站中创建自定义 Hooks 的文档中所做的操作。
对不起，我的错，这是一个假设，并编辑了看到你的编辑:)

标签： javascript reactjs arrays react-hooks axios

【解决方案1】：

当你调用fetchData(searchString)时，你会得到承诺，因为它是一个async函数，它总是返回一个promise

我会这样做

useEffect(() => {
  async function getData() {
    const data = await fetchData(searchString);
    setGameSearch(data);
  }
  if (searchString) {
    getData();
  }
}, [searchString]);

还将下面的generateSearchOptions函数重构为

const generateSearchOptions = (array) => array.map(item => item.name)

【讨论】：

【解决方案2】：

当您映射一组对象时，您可以在每个对象上使用

Object.entries((obj)=> {
//whatever you wanna do

})

Object.entries(obj) 会将您的对象转换为数组。

【讨论】：

它将一个对象转换为一个数组，但它不需要回调 tmk ...它只是Object.entries(your_obj) .....虽然我认为这不是问题