TypeError：links.map 不是 React 函数

Question

我正在使用 reactjs 打字稿，在尝试显示来自服务器的 JSON 数据时似乎无法阻止此错误：

import React, { useRef, useState } from "react";
import useHttp from "../hooks/usehttp";

const HomePage: React.FC = () => {
const [links, setLinks] = useState([]);
const ref = useRef<HTMLInputElement>(null);
const { request } = useHttp();

const pressHandler = async (event: React.KeyboardEvent) => {
if (event.key === "Enter") {
  try {
    const data = await request(
      "http://localhost:5000/api/link/generate-guest",
      "POST",
      { from: ref.current!.value },
      {}
    );
    alert(data.message);
    console.log(data.link.to); // the link => localhost:5000/jshdadsa
    setLinks(data.link.to);
    console.log(links); // shows undefined ?????
  } catch (error) {
    alert(error);
  }
}
};

return (
<>
  <div className="row">
    <div className="col s8 offset-s2" style={{ paddingTop: "2rem" }}>
      <div className="input-field">
        <input
          placeholder="Enter link"
          id="link"
          type="text"
          ref={ref}
          onKeyPress={pressHandler}
        />
        <label htmlFor="link">Enter link</label>
      </div>
      <div>
        { {links.map((link: any) => {
          return (
            <ul className="collection with-header">
              <li className="collection-item">{link}</li>
            </ul>
          );
        })} }
      </div>
    </div>
  </div>
</>
);
};

export default HomePage;

不知道我错过了什么。

Answer 1

使用此代码来更新示例中的链接数组：

setLinks([...links, data.link.to])