反应钩子 typescript 如何更新 state

Question

嗨朋友们，在从 api 获取数据后，我无法更新 state。 谁能帮我弄清楚。 我是 typescript 的新手。

type FrequentlySearches = {
    value: string;
    count: string;
};

const initialFrequentlySearch: FrequentlySearches[] = [{
    value: '',
    count: '',
}];

export const GetFrequentlySearches = () => {

    const [data, dataSet] = useState(initialFrequentlySearch);

    const fetchFrequentlySearches = useCallback(async () => {
        let response = await fetch(url_pathname)
        let datas = await response.json()
        for (const key in datas) {
            // how  to update the state here !!!
            dataSet({
                value: datas[key].value,
                count: datas[key].count
            })
        }

    }, [url_pathname])


    useEffect(() => {
        fetchFrequentlySearches()
    }, [url_pathname])

};

Answer 1

你需要

(1) 正确输入fetch ，见这里

(2) data是一个对象数组，所以

        dataSet({
            value: datas[key].value,
            count: datas[key].count
        })

没有多大意义 - 将对象数组传递给 state 设置器 function 。

将响应的 object 值作为数组可能会更容易 - 无需手动迭代。

useCallback也是完全多余的。

export const GetFrequentlySearches = () => {
    const [data, setData] = useState(initialFrequentlySearch);
    useEffect(() => {
        fetch(url_pathname)
        .then((response => response.json()))
        .then((datasUntyped) => {
            const datas = datasUntyped as FrequentlySearches[];
            setData(Object.values(datas));
        })
        // .catch(handleErrors);
    }, [url_pathname])

}

如果 API 结果是对象数组而不是对象 object，那么您根本不需要Object.values

setData(datas);

如果 API 结果包含您需要排除的其他 object 属性，请先将 map 数组删除：

setData(
  Object.values(datas)
    .map(obj => ({ value: obj.value, count: obj.count }))
);