这个例子中的数据是如何被解构的？

Question

我正在按照一篇文章做一个项目日记App。它使用 redux 工具包和 miraj 作为假服务器。它有一个名为 Editor

的组件

 const Editor: FC = () => {
  const { currentlyEditing: entry, canEdit, activeDiaryId } = useSelector(
    (state: RootState) => state.editor
  );
  const [editedEntry, updateEditedEntry] = useState(entry);
  const dispatch = useAppDispatch();

  const saveEntry = async () => {
    if (activeDiaryId == null) {
      return showAlert('Please select a diary.', 'warning');
    }
    if (entry == null) {
      http
        .post<Entry, { diary: Diary; entry: Entry }>(
          `/diaries/entry/${activeDiaryId}`,
          editedEntry
        )
        .then((data) => {
          if (data != null) {
            const { diary, entry: _entry } = data;
            dispatch(setCurrentlyEditing(_entry));
            dispatch(updateDiary(diary));
          }
        });

作为新手我无法理解以下内容：

enter code here const { currentlyEditing: entry, canEdit, activeDiaryId } = useSelector(

在这一行中，我的理解是一个类型。但是文章中没有条目的类型或接口。第二

 .post<Entry, { diary: Diary; entry: Entry }>(
          `/diaries/entry/${activeDiaryId}`,

我们正在发出 post 请求，在 miraj 服务器中我们将路由定义为：

this.post('/diaries/entry/:id', diary.addEntry);

我不明白这个 :id 部分。我们如何在这里获取 ID？

最后一件事 :) 在这一行中： const { 日记，条目：_entry } = 数据；调度（setCurrentlyEditing（_entry））; 为什么输入前有下划线？和上面一样的问题是它是打字稿的类型还是我不知道的一些解构方法。

Answer 1

code here const { currentlyEditing: entry, canEdit, activeDiaryId } = useSelector(
in this line to my understanding entry is a type. but there is no type or interface of entry in article. 2ndly

不，这不是一个类型。这是用于重命名解构属性的 JS 行话。该代码只是将 currentlyEditing 重命名为 entry。 const { diary, entry: _entry } = data 也是如此，因此 dispatch(setCurrentlyEditing(_entry)).

this.post('/diaries/entry/:id', diary.addEntry);
i dont understand this :id part. how we would get the id over here?

这基本上是一个占位符，用于检索您从 URL 收集的动态参数，例如，如果 URL 是 http://www.website.org/diaries/entry/123，那么 id=123，这是海市蜃楼会自动从路由中解析出来。请参考文档部分 here

这个例子中的数据是如何被解构的？

how the data is destructured in this example?

typescript

reactjs

redux

react-redux

miragejs