javascript - 无法读取未定义的属性 "toFixed"

Question

我有以下代码块:

export interface Record {
Percentage_Emissions: number;
Percentage_Emissions_Previous: number;
Vs_Previous_Year: number;
}

const Info = ({
  data
}: {
  data: dashboard.Results<Record>;
}) => {
  const styles = Styles(myStyles);
  const record = data.results.records[0];
  let redStyle =
  record.Percentage_Emissions < 0
    ? [styles.textInRed]
    : [styles.textInGreen];
    const percentageText =
    record.Percentage_Emissions === undefined
      ? `-`
      : `${(
          record.Percentage_
Emissions * 100
        ).toFixed(2)}${strings("data.percent")}`;

我刚刚意识到问题出在 render 方法上，它调用:

 <Text
          style={[styles.text, styles.textLarge]}
        >{`${record.Percentage_Emissions.toFixed(2)}${strings(
          "data.percent"
        )}`}</Text>

我认为问题是渲染方法假定 Percentage_Emissions 已定义，但我仍然不知道如何修复它。

在模拟器中，由于错误“无法读取未定义的属性“toFixed”而导致页面崩溃。如果没有找到数据，它应该返回破折号，或者如果条件格式可用则返回舍入信息.我看不出我的代码有什么问题。有人对这里发生的事情有任何想法吗？

Answer 1

分解你的问题:

const percentAsString = (n) => (n * 100).toFixed(2) + strings('data.percent');

const safePercentAsString = (n) => (n === undefined) ? '-' : percentAsString(n);

这些都是简单的单元测试。

然后在你自己的函数中，做:

const percentageText = safePercentAsString(record.Percentage_Emissions);

如果您仍然对输出有问题，您知道问题一定出在 record 对象的处理上，而不是您的输出代码。