React组件不会在道具更改时重新渲染

Question

I've searched for other answers on here but none seem to explain the issue I'm having...

I have the following component (simplified for clarity):

export default function ListAllTeamsData(props) {
    // Create intial array
    let teamsArray = props.data.teams

    // Sort teams
    const sortTeams = stableSort(teamsArray)

    return (
        <React.Fragment>
            <Subscription>
                {({ data, loading }) => {
                    teamsArray.push(data.teamCreated)
                    return null
                }}
            </Subscription>
            <Subscription>
                {({ data, loading }) => {
                    teamsArray.splice(teamsArray.findIndex((e) => e.id === data.teamDeleted.id), 1)
                    return null
                }}
            </Subscription>
            <ListAllTeamsDataLayout teamList={sortTeams} />
        </React.Fragment>
    )
}

As you can see, the ListAllTeamsDataLayout component takes the prop teamsList which has its value calculated by running a function on teamsArray.

Now, the issue I'm having is that when teamsArray is updated (through either one of the components), ListAllTeamsDataLayout gets rendered again however the teamList prop doesn't change. I know this because I have a console.log in the ListAllTeamsDataLayout to show the value of props.teamList.

However, when the ListAllTeamsDataLayout component is re-rendered again (caused by something else not related), this time the teamList prop has been updated to the correct value. This means that to get the correct data in the component, it has to be rendered TWICE after the teamList prop is changed.

How do I ensure that whenever teamsArray is pushed or sliced from one of the Subscription components, then ListAllTeamsDataLayout will run the sortTeams function again and will re-render with the new values?

In case it helps, the components are from Apollo GraphQL.

Answer 1

Directely use your props.data.teams. because sortTeams variable does not reflect every time the props.data.teams change

I've searched for other answers on here but none seem to explain the issue I'm having...

I have the following component (simplified for clarity):

export default function ListAllTeamsData(props) {
    // Create intial array
    let teamsArray = props.data.teams

    // Sort teams
    const sortTeams = stableSort(props.data.teams.teamsArray)

    return (
        <React.Fragment>
            <Subscription>
                {({ data, loading }) => {
                    teamsArray.push(data.teamCreated)
                    return null
                }}
            </Subscription>
            <Subscription>
                {({ data, loading }) => {
                    teamsArray.splice(teamsArray.findIndex((e) => e.id === data.teamDeleted.id), 1)
                    return null
                }}
            </Subscription>
            <ListAllTeamsDataLayout 
            //Directly use your teamsArray props
            teamList= {stableSort(props.data.teams.teamsArray)} />
        </React.Fragment>
    )
}