Реактивный компонент не перерисовывается при смене реквизита - PullRequest
Новая
       15

Реактивный компонент не перерисовывается при смене реквизита

0 голосов
/ 12 марта 2019

Я искал другие ответы здесь, но, похоже, никто не объясняет возникшую у меня проблему ...

У меня есть следующий компонент (упрощенный для ясности): 

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 принимает значение prop TeamList, значение которого рассчитывается путем запуска функции в teamArray.

Теперь проблема, с которой я сталкиваюсь, заключается в том, что при обновлении teamArray (через один из компонентов) визуализация ListAllTeamsDataLayout выполняется снова, однако реквизит teamList не изменяется. Я знаю это, потому что у меня есть файл console.log в ListAllTeamsDataLayout, чтобы показать значение props.teamList.

Однако, когда компонент ListAllTeamsDataLayout повторно визуализируется повторно (вызванный чем-то другим, не связанным), на этот раз реквизит teamList был обновлен до правильного значения. Это означает, что для получения правильных данных в компоненте он должен обрабатываться ДВАЖДЫ после изменения реквизита teamList.

Как я могу гарантировать, что всякий раз, когда commandsArray будет вытолкнут или нарезан из одного из компонентов подписки, ListAllTeamsDataLayout снова запустит функцию sortTeams и выполнит повторную визуализацию с новыми значениями?

Если это помогает, компоненты взяты из Apollo GraphQL.

1 Ответ

0 голосов
/ 12 марта 2019

Целенаправленно используйте ваши 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>
    )
}
...