反应钩子数组第一个值为空答案

【问题标题】：React hook array first value empty反应钩子数组第一个值为空
【发布时间】：2020-05-07 11:08:57
【问题描述】：

我正在尝试保存从 api 获取的数组并将其保存到 useState([''])，这样做我数组中的第一个条目是空的。

看起来像这样： (3) ["", "5ea5d29230778c1cd47e02dd", "5ea5d2f430778c1cd47e02de"]

我从我的 axios 获得的实际数据称之为(2) ["5ea5d29230778c1cd47e02dd", "5ea5d2f430778c1cd47e02de"]

我是这样称呼和设置的：

  const [favorites, setFavorites] = useState(['']);

  const getIds = async () => {
    const { data } = await axios.get('/api/favIds');
    setFavorites(favorites => [...favorites, ...data.favorites]);
  }

  useEffect(() => {
    getIds();
  }, []);

编辑

我正在使用打字稿

如果我这样设置：

const [favorites, setFavorites] = useState([]);

我收到此错误：

> Argument of type '(favorites: never[]) => any[]' is not assignable to
> parameter of type 'SetStateAction<never[]>'.   Type '(favorites:
> never[]) => any[]' is not assignable to type '(prevState: never[]) =>
> never[]'.
>     Type 'any[]' is not assignable to type 'never[]'.
>       Type 'any' is not assignable to type 'never'.ts(2345)

【问题讨论】：

...favorites。您追加到您已经拥有'' 的现有数组。使用'' 初始化数组的任何原因？
@Keith 如果它是空的，它在打字稿中不起作用

标签： javascript reactjs typescript async-await react-hooks

【解决方案1】：

像这样定义它的类型：

  const [favorites, setFavorites] = useState<string[]>([]);


  setFavorites(() => [...data.favorites])

【讨论】：

我认为只使用 setFavorites([...data.favourites])，因为它使用钩子 @utdev

【解决方案2】：

需要将useState的类型定义为string[]

const [favorites, setFavorites] = useState<string[]>([]);

  const getIds = async () => {
    const { data } = await axios.get('/api/favIds');
    setFavorites(favorites => [...favorites, ...data.favorites]);
  }

  useEffect(() => {
    getIds();
  }, []);

Sample demo

【讨论】：

哦，是的，我专注于错误，所以完全错过了初始状态

【解决方案3】：

第一个元素实际上是您的默认状态：useState([''])。您使用空字符串作为值对其进行了初始化，并将其传播到 [...favorites, ...data.favorites] 代码块中的新状态。

将您的初始化状态声明更改为useState([])

【讨论】：

【解决方案4】：

您是否要保留该空字符串值？

如果不这样做，则在添加使用 axios 获得的数据时，您不需要包括之前的状态：

setFavorites(() => [...data.favorites])

【讨论】：