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

Question

我在这里搜索了其他答案，但似乎都无法解释我遇到的问题...

我具有以下组件（为清楚起见已简化）：

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>
    )
}

如您所见，ListAllTeamsDataLayout组件使用propsTeamList，其值是通过在teamsArray上运行一个函数来计算的。

现在，我遇到的问题是，在更新teamsArray（通过任一组件）时，将再次呈现ListAllTeamsDataLayout，但teamList属性不会更改。 我知道这一点是因为我在ListAllTeamsDataLayout中有一个console.log来显示props.teamList的值。

但是，当再次重新渲染ListAllTeamsDataLayout组件（由其他不相关的原因所致）时，这次teamList属性已更新为正确的值。 这意味着要在组件中获取正确的数据，必须在更改teamList属性之后将其呈现两次。

我如何确保每当从Subscription组件之一中推入TeamArray或对其进行切片时，ListAllTeamsDataLayout都将再次运行sortTeams函数，并将使用新值重新呈现？

如果有帮助，这些组件来自Apollo GraphQL。

Answer 1

直接使用您的props.data.teams。 因为sortTeams变量不会在props.data.teams每次更改时都反映出来

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>
    )
}