在表单中创建新的 json 元素时，我不明白 id 来自哪里（React Hooks）

Question

我有一个带有 React Hooks 的 CRUD 表单，可以正常工作，问题是我没有表明该项目是使用唯一 ID 创建的，但它却拥有它。拥有一个独特的ID是我感兴趣的事情，但我不明白它从何而来。代码的任何部分是否会导致它被创建？我很困惑。

我正在使用 JSON 服务器。

这是 json：

{
  "posts": [
    {
      "id": 15,
      "title": "ho",
      "author": "Autor de ejemplo",
      "content": "Contenido."
    }
  ]
}

这是使用 POST 方法获取：

export function setPost(posts: IPost) {
  return fetch('http://localhost:3004/posts', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(posts)
  })
    .then(response => response.json())
}

这是形式：

interface ErrorMessageProps {
    message: string;
}

const ErrorMessage: React.FC<ErrorMessageProps> = props => {
    return (
        <div className="errorEmpty">
            {props.message}
        </div>
    );
};

const New: React.FC = () => {
    const [newPost, setNewPost] = useState({
        id: Number(''),
        title: '',
        author: '',
        content: ''
    })
    const [error, setError] = useState('')

    let navigate = useNavigate();

    const handleInputChange = (e: React.FormEvent<HTMLInputElement>) => {
        console.log((e.target as HTMLInputElement).value)
        setNewPost({
            ...newPost,
            [(e.target as HTMLInputElement).name]: (e.target as HTMLInputElement).value
        })
    };

    const createPost = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        if (!newPost.title || !newPost.author || !newPost.content) {
            setError("¡No dejes campos vacíos!")
        } else {
            setPost(newPost);
            navigate("/");
        }
    }

    return (
        <div className="containerHomepage">
            <form className="formulari" onSubmit={createPost}>
                <div className="containerBreadCrumb">
                    <ul className="breadCrumb">
                        <li>Posts</li>
                    </ul>
                </div>

                <div className="containerTitleButton">
                    <input
                        className=""
                        type="text"
                        placeholder='Post title'
                        name="title"
                        onChange={handleInputChange}
                    ></input>
                    <button
                        className="button"
                        type="submit"
                    >Save</button>
                </div>

                <div className="containerEdit">
                    <input
                        className="editAuthor"
                        type="text"
                        placeholder='Author'
                        name="author"
                        onChange={handleInputChange}
                    ></input>
                    <input
                        className="editContent"
                        type="textarea"
                        placeholder='Content'
                        name="content"
                        onChange={handleInputChange}
                    ></input>
                    < ErrorMessage
                        message={error}
                    />
                </div>

            </form>
        </div>
    );
};


// ========================================

export default New;