React useState在通过扩展引用克隆数组时未重新呈现

Question

我试图排序数组，并反映其排序结果立即使用状态钩子。我已经新的反应是检测其状态变化的Object.is（），所以试图传播数组之前使用useState如下所示；

const [reviews, setReviews] = useState([...book.reviews]);

    useEffect(() => {
        const sortedReviews = [...reviews]
            .sort((review1: IReview, review2: IReview) =>
                sortBy(review1, review2, sortRule));

        setReviews([...sortedReviews])
        }, [sortRule])

排序后，我检查了变量sorted评论的值，它按预期进行了排序，但反应并没有重新渲染页面，所以这种排序没有反映到用户界面。

我已经搜索了解决方案，似乎很多人可以通过在调用useState之前传播一个数组来解决这个问题，就像这个堆栈溢出解释的那样：为什么useState没有触发重新渲染？。任何帮助将非常感谢。谢谢你！

[新增]我的渲染部分如下：；

    <>
        {
            sortedReviews
                .map((review: IReview) => (
                    <ReviewBlock id={review.id}
                                 review={review}
                                 targetBook={book}
                                 setTargetBook={setBook}/>
                ))
        }
    </>

Answer 1

当组件不重新渲染时，几乎总是由于状态的变化。这里您正在调用审阅上的变异操作.sort。在变异之前，您需要传播数组。

useEffect(() => {
  const sortedReviews = [...reviews].sort((review1: IReview, review2: IReview) =>
    sortBy(review1, review2, sortRule)
  );

  setReviews(sortedReviews);
}, [sortRule]);

但这里还有其他问题reviews不是useEffect的依赖项，因此我们希望使用setReviews回调，如setReviews（当前=

通常，排序数据作为usemo比作为useState更有意义。sortRule是一种状态，sortedReviews就是从中派生出来的。

调用sortBy作为比较函数的方式感觉有点不对劲。也许只是个让人困惑的名字？

此外，如果书籍正确键入为{reviews:IReview[]}，则不需要在回调中包含类型IReview。

如果您包括sortBy函数和sortRule变量，那么我可以提供更多帮助。但这是我想到的。

import React, { useState, useMemo } from "react";

type IReview = {
    rating: number;
}

type Book = {
    reviews: IReview[]
}

type SortRule = string; // just a placeholder - what is this really?

declare function sortBy(a: IReview, b: IReview, rule: SortRule): number;

const MyComponent = ({book}: {book: Book}) => {
    const [sortRule, setSortRule] = useState("");

    const reviews = book.reviews;

    const sortedReviews = useMemo( () => {
        return [...reviews].sort((review1, review2) =>
            sortBy(review1, review2, sortRule)
        );
    }, [sortRule, reviews]);
...
}

打字游戏链接

Answer 2

有时我也会遇到这个问题，在我的例子中，我只是“强制”渲染调用回调。

第一个解决方案：

const [reviews, setReviews] = useState([...book.reviews]);

    useEffect(() => {
        const sortedReviews = [...reviews]
            .sort((review1: IReview, review2: IReview) =>
                sortBy(review1, review2, sortRule));

        setReviews(()=> [...sortedReviews]) // <-- Here
        }, [sortRule])

第二个解决方案：可以使用useRef实时获取数据，见下文：

    const [reviews, setReviews] = useState([...book.reviews]);
    const reviewsRef = useRef();
     
            useEffect(() => {
                const sortedReviews = [...reviews]
                    .sort((review1: IReview, review2: IReview) =>
                        sortBy(review1, review2, sortRule));
        
                setReviewRef([...sortedReviews]) 
                }, [sortRule])

function setReviewRef(data){
       setReview(data);
       reviewsRef.current = data;
    }  

所以，取而代之的是使用状态评论使用reviewsRef.current作为u数组

我希望你能解决这个问题！