Javascript 为什么我不能在倒计时组件中使用'props.data'？

我有以下组件。这样做的原因是我没有太多地重复我自己

const InsightCard = (props) => {
    return (
        <div>
            <div class='text-gray-900 mb-2'>
                <span class='text-5xl'>
                    <CountUp start='0' end={props.data} />
                </span>
            </div>
            <div class='text-gray-600 text tracking-wide uppercase'>
                {props.type}
            </div>
        </div>
    );
};

任何想法或提示都将非常感谢。

const InsightCard=（道具）=>{
const InsightCard = (props) => {
        return (
            <div>
                <div class='text-gray-900 mb-2'>
                    <span class='text-5xl'>
                        <CountUp start='0' end={props.data} />
                    </span>
                </div>
                <div class='text-gray-600 text tracking-wide uppercase'>
                    {props.type}
                </div>
            </div>
           );
        };
}

返回(
{props.type}
);
};
}

我想我发现了你的问题， 请检查您是否必须传递类型为number的数据，因为如果props.data类型为String，则它无法工作

如果是倒计时中的结束道具，它将用于数字

const InsightCard=（道具）=>{
返回(
{props.type}
);
};
}

我想我发现了你的问题， 请检查您是否必须传递类型为number的数据，因为如果props.data类型为String，则它无法工作

---

是倒计时中的结束道具，它将为数字工作

它在我的测试中工作；我猜它没有从父级正确地传递给Insight组件

const data = {
 confirmed: 20,
 death: 10,
 negative: 30,
 tested: 100
} 

return (
 <div>
   <Insight data={data}/>
 </div>
)

const数据={
确认：20，
死亡人数：10，
负数:30,，
测试：100
} 
返回(
)

它在我的测试中起作用；我猜它没有从父级正确地传递给Insight组件

const data = {
 confirmed: 20,
 death: 10,
 negative: 30,
 tested: 100
} 

return (
 <div>
   <Insight data={data}/>
 </div>
)

const数据={
确认：20，
死亡人数：10，
负数:30,，
测试：100
} 
返回(
)

通过@codingwithmanny测试我是否得到100或返回值，成功地将其与建议一起使用

---

从API返回int。我不知道为什么会出现这种情况，因为没有

|100

它不会返回任何内容。

通过@codingwithmanny将其与建议一起使用，以测试我是否得到100或返回值

---

从API返回int。我不知道为什么会这样，因为没有

|100

它不会返回任何内容。

很可能没有定义

道具数据。您还可以通过执行
props.data | | 100
来测试这一点，如果它总是100，然后你就知道这个值没有定义，甚至可能不是一个数字。在
确认/死亡/测试的控制台中检查这个值，并检查
InsightCard
@codingwithmanny中的道具。这有点起作用了……我已经按照你的建议做了。但是，我没有得到100，而是从API得到了实际返回的int，并按预期工作。@mrpbennett我也有同样的问题，你找到了aswer吗？@codingwithmanny我已经测试了所有的事情，比如转换成一个数字或将其存储在一个变量中并传递它，但它没有工作。在正常的段落中定义道具的值，这很可能是因为没有定义
props.data
。您还可以通过执行
props.data | | 100
来测试这一点，如果它总是100，然后你就知道这个值没有定义，甚至可能不是一个数字。在
确认/死亡/测试的控制台中检查这个值，并检查
InsightCard
@codingwithmanny中的道具。这有点起作用了……我已经按照你的建议做了。但是，我没有得到100，而是从API得到了实际返回的int，并按预期工作。@mrpbennett我也有同样的问题，你找到了aswer吗？@codingwithmanny我已经测试了所有的事情，比如转换成一个数字或将其存储在一个变量中并传递它，但它没有工作。在一个正常的段落中定义prop的值，它从API开始工作，它给我一个int。应该可以正常工作。尽管我刚刚使用了
{props.data | | 100}
并且工作得很好，但是从上面来看。。。Weirdis如果props.data有一些值，并且这些值类型被刺痛，那么它再次不起作用。因为如果该值类型是number，那么它是从API工作的，它向我提供了一个int。应该可以正常工作。尽管我刚刚使用了
{props.data | | 100}
并且工作得很好，但是从上面来看。。。Weirdis如果props.data有一些值，并且这些值类型被刺痛，那么它再次不起作用。因为如果那个值类型是数字，那么它就起作用了。如果你找到发生这种情况的原因，请告诉我！如果你找到了原因，请告诉我！