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

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

1 个答案: