跳过一些空数组 - 状态和控制台中的问题答案

【问题标题】：Skip a number of empty arrays - Problems in states and console跳过一些空数组 - 状态和控制台中的问题
【发布时间】：2023-01-04 18:59:17
【问题描述】：

在getRecommend / getPopular 函数中获取数据，然后将结果写入适当的状态并将它们传播到另一个组件，问题是，当显示这2个状态时，我首先有一堆空数组，这正常吗还是不行，不行的话怎么修？

console[]里面大概有10-15行，然后数据就来了

const {userId} = useParams();
    const {page} = useParams();

    const [recommend, setRecommend] = useState([]);
    const [popular, setPopular] = useState([]);

    useEffect(() => {
        const fun = async () => {
            try {
                let result = await getRecommend(userId, 6)
                if (result) {
                    setRecommend(result)
                }
            } catch (err) {
                console.log("err")
            }
        }
        fun()
    }, [userId])

【问题讨论】：

嘿，你能解释一下 console.log 发生在哪里吗？你是说那个安慰错误的人吗？或者别的地方？
您必须显示更多代码。整个组件以及您在哪里使用它。
@AmitMaraj 在 useEffect 之后
@KonradLinkowski 它已满然后我只映射数据
React 中的组件会多次重新渲染。第一次渲染数据为空是正常的。 10-15？也许如果你有 10 - 15 个这个组件。如果您不想显示代码，我们怎么知道？

标签： javascript node.js reactjs react-native react-hooks

【解决方案1】：

首先，如果你有空数组的状态，这是正常的。您可以通过添加 skeleton 来改善用户体验

此外，您可以通过检查更多条件来减少调用 API（以及渲染）的次数，如下所示：

    useEffect(() => {
        const fun = async () => {
            try {
                let result = await getRecommend(userId, 6)
                if (result) {
                    setRecommend(result)
                }
            } catch (err) {
                console.log("err")
            }
        }
        if(userId && page => 0){
           fun()
        }
    }, [userId])

【讨论】：