“TypeError：status.map 不是函数” - 使用 useState 和 Map 的 TypeScript答案

【问题标题】："TypeError: status.map is not a function" - TypeScript using useState & Map“TypeError：status.map 不是函数” - 使用 useState 和 Map 的 TypeScript
【发布时间】：2021-10-04 11:56:29
【问题描述】：

我试图了解为什么我在 TS 上出现此错误，当我在输入时写信时弹出错误 “TypeError: status.map is not a function”，是我的第一次使用TS。

这是我在 github 上的原始代码 -> https://github1s.com/SantGT5/Front-JW/blob/dev/src/Component/Search.tsx

这是错误所在 ->

interface foundUser {
  name?: any;
  map?: any;
}

const [status, setStatus] = useState<foundUser>([]);

  useEffect(() => {
    async function fetchSearch() {
      try {
        const response: any = await api.post("/search", { name: status.name });

        setStatus({ ...response.data });
      } catch (err: any) {
        console.log(err.response);
      }
    }
    fetchSearch();
  }, [status.name]);
  
  
        <ol>
        {status.map((elem: any) => {

          <li>{elem.name}</li>

        })}
      </ol>

而且，说界面是正确的 -> map?: any ?

【问题讨论】：

最初 status 是一个数组，当你在它上面 .map 时你就是这样对待它的，但是 useEffect 的依赖是 status.name （在数组上未定义）并且你'将response.data 重新视为一个对象（由于某种原因，您正在浅拷贝）。目前尚不清楚数据的实际形状是什么，但您的代码并不能始终如一地处理它。

标签： reactjs typescript react-hooks

【解决方案1】：

setStatus({ ...response.data });

您将其设置为内部带有response.data 的对象。
您不能映射对象，只能映射数组。

编辑：
您实际上可以遍历对象，但它的完成方式不同。
如果相关，请查看this。

【讨论】：

将 { ...response.data } 更改为 [...response.data] 应该可以解决它。除非response.data 不是数组，否则需要更多详细信息。