反應打字稿。將新物件從api推送到現有物件陣列而不重復它們的正確方法

我有一個自定義鉤子，當時我呼叫了 16 個 subreddits，因為我想實作無限滾動。當 url 頁面引數更改時，我想將新資料添加到陣列中，然后我映射。但是我找不到使用打字稿的正確方法。你們中的一些人可以告訴我正確的方法嗎？

型別：

export type Subreddits = [Subreddit];
export type Subreddit = {
id: string;
title: string;
description: string;
}; 

鉤子：

function useSubreddit() {
  let [subredditData, setSubredditData] = useState<any>([]);
  const [loadingSubbredits, setLoadingSubreddits] = useState(false);
  const [subredditError, setSubredditError] = useState(null);
  const dispatch = useDispatch();
  const url =
    "https://6040c786f34cf600173c8cb7.mockapi.io/subreddits?page=1&limit=16";

  useEffect(() => {
    setLoadingSubreddits(true);
    axios
      .get(url)
      .then((response) => {
        setSubredditData(
          (subredditData = [ new Set([...subredditData, ...response.data])])
        );
        dispatch(setSubredditsData(response.data));
      })
      .catch((err) => {
        setSubredditError(err);
      })
      .finally(() => setLoadingSubreddits(false));
  }, [url]);

  return { loadingSubbredits, subredditError, subredditData };
}

export default useSubreddit;

uj5u.com熱心網友回復：

這是添加新專案以設定的正確方法：

setSubredditData((
    { subredditData }) => ({
        subredditData: new Set(subredditData).add(response.data)
      })
);

uj5u.com熱心網友回復：

subredditData將型別更改為Array

const [subredditData, setSubredditData] = useState<Array>([])

然后使用；

setSubredditData(subredditData => [...subredditData, ...response.data])

理想情況下，您應該定義回應物件的型別，以便 Typescript 知道它擁有什么樣的資料；

.then((response: ResponseType) => {

作業示例：codesandbox

uj5u.com熱心網友回復：

import { useState, useEffect } from "react";
import axios from "axios";

function useSubreddit() {
  let [subredditData, setSubredditData] = useState({});
  const [loadingSubbredits, setLoadingSubreddits] = useState(false);
  const [subredditError, setSubredditError] = useState(null);
  //console.log(subredditData);
  const url =
    "https://6040c786f34cf600173c8cb7.mockapi.io/subreddits?page=1&limit=16";

  useEffect(() => { 
    setLoadingSubreddits(true);
    axios
      .get(url)
      .then((response) => {
        const result = response.data?.reduce((prev,curr) => ({ ...prev, ...{ [curr.id]: curr }}),{});
       
        setSubredditData((subredditData) => ({ ...subredditData, ...result }));
      })
      .catch((err) => {
        setSubredditError(err);
      })
      .finally(() => setLoadingSubreddits(false));
  }, [url]);

  return { loadingSubbredits, subredditError, subredditData:Object.values(subredditData) };
}

export default useSubreddit;

作業示例：https ://codesandbox.io/s/musing-brown-9nf7ne?file=/src/App.js

uj5u.com熱心網友回復：

我找到了解決方案

function useSubreddit() {
  const [subredditData, setSubredditData] = useState<Array<any>>([])
  const [loadingSubbredits, setLoadingSubreddits] = useState(false);
  const [subredditError, setSubredditError] = useState(null);
  const dispatch = useDispatch();
  const url =
    "https://6040c786f34cf600173c8cb7.mockapi.io/subreddits?page=1&limit=4";

  useEffect(() => {
    setLoadingSubreddits(true);
    axios
      .get(url)
      .then((response: SubredditsResponse) => {
        setSubredditData(Array.from( new Set([ ...subredditData, ...response.data])))
        dispatch(setSubredditsData(response.data));
      })
      .catch((err) => {
        setSubredditError(err);
      })
      .finally(() => setLoadingSubreddits(false));
  }, [url]);

  return { loadingSubbredits, subredditError, subredditData };
}

export default useSubreddit;

謝謝你們的幫助

標籤：数组 反应 打字稿 反应钩子 使用状态

上一篇：如何在javascript中獲取下周一的10個陣列

下一篇：使用Malloc的2D數學矩陣