programing

상태가 업데이트될 때 구성 요소가 다시 렌더링되지 않음

copysource 2022. 8. 28. 19:07
반응형

상태가 업데이트될 때 구성 요소가 다시 렌더링되지 않음

디버깅을 시도하고 있습니다만, 작성한 라이프 사이클 함수의 외부 API에서 데이터를 꺼내 변환으로 스토어를 갱신하면 상태를 취득하는 컴포넌트의 계산 속성이 갱신되지 않아 컴포넌트가 재렌더링되지 않습니다.좋은 생각 있어요?

컴포넌트 템플릿은 다음과 같습니다.

<template>
    <div class="list">
        <ul>
            <ListItem v-for="transaction in transactions" :list-item-data="transaction" :key="transaction.txid"/>
        </ul>
    </div>
</template>

<script>
    import ListItem from './ListItem.vue';
    import External from '../ExternalAPI';

    export default {
        methods: {
            fetchData() {
                return ExternalAPI.fetch(data => {
                    this.$store.dispatch('setTransactions', data);
                });
            }
        },
        components: {
            ListItem
        },
        computed: {
            transactions () {
                return this.$store.getters.transactions;
            },
        },
        created() {
            this.fetchData();
        },
    }
</script>

매장은 다음과 같습니다.

export const store = new Vuex.Store({
    state: {
      transactions: [],
    },
    getters: {
      transactions: state => {
        return state.transactions;
      }
    },
    mutations: {
      setTransactions: (state, transactions) => {
        let txs = transactions.map(transaction => {
            return new Transaction(transaction.id, transaction.prop1, transaction.prop2);
        });
        state.transactions = txs;
      },
    },
    actions: {
      setTransactions: (context, transactions) => {
        context.commit('setTransactions', transactions);
      },
    },
});

vuex 상태 트리의 모든 항목은 기본 일반 개체 또는 배열이어야 합니다.문서에서는 명시적으로 그렇게 말한 내용은 찾을 수 없지만 vuex 문제 153에 대한 코멘트는 찾을 수 있습니다.

지금 인스턴스화 하고 있어요.Transaction당신의 안에서setTransactions돌연변이그걸 다른 걸로 바꿔봐

setTransactions: (state, transactions) => {
  let txs = transactions.map(transaction => {
    return {
      id: transaction.id,
      prop1: transaction.prop1,
      prop2: transaction.prop2
    };
  });
  state.transactions = txs;
},

언급URL : https://stackoverflow.com/questions/47946282/component-not-re-rendering-when-state-is-updated

반응형