反应变量不起作用 - 苗条

Question

反应变量在我的 svelte 应用程序中不起作用。当我将它们登录到我的控制台时，它们是 undefined.

我在App.svelte中有以下相关代码

<script>
 let polls = [
  {
    question: "JavaScript or Python?",
    answerA: "JavaScript",
    answerB: "Python",
    votesA: 16,
    votesB: 4
  }
 ]

 const handleVote = e => {/* increase vote A or vote B by 1*/}
</script>

<PollsList {polls} on:vote={handleVote}/>

在PollsList.svelte我有如下相关代码

<script>
  export let polls = [];
</script>

{#each polls as poll (poll.id)}
  <PollItem {poll} on:vote/>
{/each}

在我的 PollItem.svelte 中，我有以下相关代码

<script>
 import {createEventDispatcher} from "svelte";

 const disptach = createEventDispatcher();
 export let poll;
 
 $: totalVotes = poll.votesA + poll.votesB;
 $: percentA = Math.round(poll.votesA / totalVotes) * 100;
 $: percentB = Math.round(poll.votesB / totalVotes) * 100;

 console.log(totalVotes, percentA, percentB, poll.votesA, poll.votesB);

const handleVote = (option, id) => dispatch("vote", {option, id});
</script>

<div>
 <div class = "answer" on:click={() => handleVote("a", poll.id)}{poll.answerA}</div>
 <div class = "answer" on:click={() => handleVote("b", poll.id)}{poll.answerB}</div>
</div>

最后一段代码中的console.log给出了undefined, undefined, undefined, 16, 4，也就是说poll.votesA和poll.votesB虽然到达了组件，但是反应变量是undefined。这是为什么？我做错了什么？

Answer 1

在您的情况下，变量尚未完成评估以记录它们，解决该问题的方法是使用 console.log 反应式，如下所示：

$: totalVotes = poll.votesA + poll.votesB;
$: percentA = Math.round(poll.votesA / totalVotes) * 100;
$: percentB = Math.round(poll.votesB / totalVotes) * 100;

$: console.log(totalVotes, percentA, percentB, poll.votesA, poll.votesB);

或者全部放在一个块中：

let totalVotes, percentA, percentB;
$:{
    totalVotes = poll.votesA + poll.votesB;
    percentA = Math.round(poll.votesA / totalVotes) * 100;
    percentB = Math.round(poll.votesB / totalVotes) * 100;
    console.log(totalVotes, percentA, percentB, poll.votesA, poll.votesB);
}

反应变量不起作用 - 苗条

Reactive variables are not working - svelte

javascript

svelte