React Component 不会在状态更改时重新渲染？

Question

我正在按该顺序更改排序顺序和设置状态，但它不会自动重新呈现。在函数 sortVal() 中，我设置了状态 setAllQues(sortArr1)，它实际上将 allQues 数组设置为 sortArr1，如果我单击排序按钮（'Latest'，'A-Z'，它应该得到 rendered.However , 'Z-A', 或 'Oldest ') 并且我控制台记录它，数组 allQues 被完美排序但没有被重新渲染。

const TopQuestions = () => {
const [allQues, setAllQues] = useState(null);
const [sortWay, setSortWay] = useState('Latest');
//const [sortArr, setSortArr] = useState([]);
const format1 = 'YYYY-MM-DD HH:mm:ss';

let sortArr1 = [];

useEffect(() => {
    fetch('http://localhost:4000/questions')
        .then(res => {
            return res.json();
        })
        .then(data => {
            if (sortWay === 'Latest') {
                data.sort((a, b) => b.sortOrder - a.sortOrder);
            }
            setAllQues(data);
        });
}, []);

const sortVal = val => {
    let sortArr1 = allQues;

    console.log(sortArr1, 'sortArr1');

    if (val === 'Latest') {
        sortArr1 && sortArr1.sort((a, b) => b.sortOrder - a.sortOrder);
        setAllQues(sortArr1);
    } else if (val === 'AZ') {
        sortArr1 && sortArr1.sort((a, b) => a.ques.localeCompare(b.ques));
        setAllQues(sortArr1);
    } else if (val === 'ZA') {
        sortArr1 && sortArr1.sort((a, b) => b.ques.localeCompare(a.ques));
        setAllQues(sortArr1);
    } else if (val === 'Oldest') {
        sortArr1 && sortArr1.sort((a, b) => a.sortOrder - b.sortOrder);
        setAllQues(sortArr1);
    }
    console.log(allQues, 'allQues');

};

    return (
    <div className='mx-56 pt-16 border-l-2'>
        <div className='px-4'>
            <div className='flex justify-between'>
                <div className=''>
                    <h1 className='text-3xl text-left mb-6 '>Top Questions</h1>
                </div>
                <div className='flex mb-6'>
                    <div className=' transition duration-300 ease-out border-2 border-r-0 border-gray-1050 px-2 py-1 hover:bg-gray-200 '>
                        <button
                            onClick={() => {
                                sortVal('Latest');
                            }}
                            className='text-gray-1150'
                        >
                            Latest
                        </button>
                    </div>
                    <div className=' transition duration-300 ease-out border-2 border-r-0 border-gray-1050 px-2 py-1 hover:bg-gray-200'>
                        <button
                            onClick={() => {
                                sortVal('AZ');
                            }}
                            className='text-gray-1150'
                        >
                            A-Z
                        </button>
                    </div>
                    <div className=' transition duration-300 ease-out border-2 border-r-0 border-gray-1050 px-2 py-1 hover:bg-gray-200 '>
                        <button
                            onClick={() => {
                                sortVal('ZA');
                            }}
                            className='text-gray-1150'
                        >
                            Z-A
                        </button>
                    </div>
                    <div className=' transition duration-300 ease-out border-2 border-gray-1050 px-2 py-1 hover:bg-gray-200 '>
                        <button
                            onClick={() => {
                                sortVal('Oldest');
                            }}
                            className='text-gray-1150'
                        >
                            Oldest
                        </button>
                    </div>
                </div>
            </div>

            {allQues &&
                allQues
                    .filter(allQue => (allQue.ques, allQue.author, allQue.dateTime))
                    .map(allQue => (
                        <EachQuestion
                            id={allQue.id}
                            ques={allQue.ques}
                            quesBrief={allQue.quesBrief}
                            author={allQue.author}
                            dateTime={allQue.dateTime}
                            hashes={allQue.hashes}
                        />
                    ))}
        </div>
    </div>
);

};

export default TopQuestions;

Answer 1

不要直接对sortArr1进行排序，首先制作它的副本，然后对该副本进行排序，然后将已排序的数组设置为状态。

你可以复制数组如下：

let copiedArr = [...sortArr1];
copiedArr.sort(sortFn);

setSortArr1(copiedArr);

Answer 2

也许你可以尝试将 allQues state 放在第二个 useEffect 参数的数组依赖项上，因为它可以观察 allQues 的状态，然后当 allQues 改变时，组件首先会产生副作用useEffect()

的参数

useEffect(() => {
    fetch('http://localhost:4000/questions')
        .then(res => {
            return res.json();
        })
        .then(data => {
            if (sortWay === 'Latest') {
                data.sort((a, b) => b.sortOrder - a.sortOrder);
            }
            setAllQues(data);
        });
}, [allQues]);

React Component 不会在状态更改时重新渲染？

React Component does not re-render on state change?

render

setstate

reactjs

use-state