typescript Svelte:变量更改时不更新#each?

ltqd579y  于 2023-03-31  发布在  TypeScript
关注(0)|答案(3)|浏览(151)

我试图显示(和实时更新)我的应用程序日志,以便我可以通过Web查看它们。问题是,当我调用updateLogs()时,它不会重新呈现each,即使第一次在mount中调用updateLogs()也不会。
每个循环:

{#each application.logs as log }
    <p>{log}</p>
{/each}

updateLogs:

function updateLogs() {
    axios.get('http://localhost:5000/applications/' + application.Id + '/logs')
        .then(function (response) {
            application.logs = response.data;
        })
        .catch(function (error) {
            console.log(error);
        });
}

声明:

let application = {
    logs: []
};
js5cn81o

js5cn81o1#

既然任务被提到了三次

application.logs = response.data

是一个,这里没有问题,但可能是响应/返回的数据
REPL

<script>
    let application = {
        logs: []
    };

    async function fetchLogs() {
        return {data: ['log']}
    }

    function updateLogs() {
        fetchLogs()
            .then(function (response) {
            application.logs = response.data;
        })
            .catch(function (error) {
            console.log(error);
        });
    }
</script>

<button on:click={updateLogs}>
    updateLogs
</button>

{#each application.logs as log }
<p>{log}</p>
{/each}
fkaflof6

fkaflof62#

我想有三种方法可以做到这一点。
1.使用React式$:而不是let来声明application

$: application = {
    logs: []
};

1.使用key块来监视并在每次被监视的变量改变时重新呈现子块(#each);在这个例子中是(application.logs)

{#key application.logs}
{#each application.logs as log}
<p>{log}</p>
{/each}
{/key}

1.再次声明application.logs只是为了确认,有时工作...我不知道如何以及为什么..

function updateLogs() {
    axios.get('http://localhost:5000/applications/' + application.Id + '/logs')
        .then(function (response) {
            application.logs = response.data;
             application.logs =  application.logs //****Added Line
        })
        .catch(function (error) {
            console.log(error);
        });
}
uyhoqukh

uyhoqukh3#

将updateLogs()函数更新为:

function updateLogs() {
  axios.get('http://localhost:5000/applications/' + application.Id + '/logs')
    .then(function (response) {
        // Reassigning application with the updated data using ES6 spread syntax 
        application = {...application, logs: response.data};
    })
    .catch(function (error) {
        console.log(error);
    });
 }

Svelte并不认为application.logs = response.data是一个React式赋值。你可以更新对象,然后将其重新赋值给它自己,或者像我一样使用ES6 spread语法。你可以了解更多关于here的信息。
谢谢!

相关问题