类型错误：links.map 不是 function 反应

Question

I'm working with reactjs typescript and cannot seem to prevent this error when trying to display JSON data from the server:

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;

Not sure what i am missing.

Answer 1

Use this code in order to update the array of link in your example:

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