为什么带有array.sort的reducer不会触发重新渲染？

Question

我在React中重新渲染表时遇到了问题。
首先是的外观
当我从SWAPI获取数据（正在执行操作）并将其传递给reducer时，它可以正常工作，并且表组件可以重新呈现而没有任何麻烦。
但是，当我尝试通过 SORT_RESULTS reducer对其进行排序时，它对表本身没有任何作用。它实际上按照 FETCH_DATA reducer的方式修改状态，但不执行任何操作，但是我可以记录排序的信息并确保按预期排序。
预先感谢您的帮助！

// actions.ts
export const onDataFetched = (currentPage: number = 1) => (
    async (dispatch:any) => {
        let data: {} = await fetch(`http://swapi.dev/api/people/?page=${currentPage}`)
                              .then(response => response.json())
        const dataToReturn = {
            type: 'FETCH_DATA',
            payload: data
        }
        dispatch(dataToReturn)
    }
)

// reducers.ts
case FETCH_DATA:
    // returns new state object
    return {
        ...state,
        swapi_data: {
            ...action.payload
        }
    }

// actions.ts
export const onSortResults = (payload: string) => (
    (dispatch:any) => {
        dispatch({type: 'SORT_RESULTS', payload})
    }
)

// reducers.ts
case SORT_RESULTS:
    let results = state.swapi_data.results;
    // title is heading of a table column (e.g. 'name', 'weight', etc)
    const title = action.payload;
    
    // sorts array with persons (objects)
    results.sort((a: any, b: any) => {
        return (a[title] > b[title]) ? 1 : ((b[title] > a[title]) ? -1 : 0)
    })

    // as in example with FETCH_DATA reducers it's doing the same job - returns new state object
    return {
        ...state,
        swapi_data: { 
            ...state.swapi_data,
            results: results,
        },
    }

Answer 1

数组排序突变

如果您进行突变，则由于参考相同，因此不会检测到任何变化。但是sort也会返回自身，因此您可以添加此代码。传播操作员进行复制，并在此处进行更改，这表示将检测到您的更改。

const sortedResults = results.sort((a: any, b: any) => {
  return (a[title] > b[title]) ? 1 : ((b[title] > a[title]) ? -1 : 0)
})

return {
        ...state,
        swapi_data: { 
            ...state.swapi_data,
            results: [...sortedResults],
        },
    }