React网站的Safari TypeError或浏览器错误

Question

我正在使用React创建一个仪表板网站。我一直在不同的浏览器上测试它，它在Firefox、Chrome和Edge上运行良好。然而，当我尝试在Safari中打开它时，它会抛出一个错误。

情况如下：用户访问"摘要"页面，其中会生成一些概览图。在该页面中，用户可以选择一个选项来过滤"；分区"；对于Summary，因此只生成关于该给定分区的图表。然而，当在Safari中选择分区时，参数是未定义的。

这是我传递参数以生成图表的代码。"All"选项为每个分区生成图表。正如您所看到的，我正在传递<Charts />组件中的数据和分区。

{partition !== 'All'
? <><h2 className={classes.title}>{partition}</h2>
<Charts data={chartData} partition={partition} /></>
: <>{partitionItems.filter(el => { return el !== 'All' }).map(ptt => {
return <>
<h2 className={classes.title}>{ptt.charAt(0).toUpperCase() + ptt.slice(1)}</h2>
<Charts data={chartData} partition={ptt.toLowerCase()} />
</>
})}

当我收到<Charts />中的参数时，我需要进行一些操作。

let temp = partition.toLowerCase();
const [usageLabels, usageValues] = parseSummaryData(data[temp]["usage"])

然后它抛出TypeError:undefined不是一个对象(评估"data[temp]["usage"](，这没有意义，因为它在其他所有浏览器上都能正常工作。

我想Safari可能与React不兼容，但从他们的文档中可以看出，他们确实支持浏览器。

我们非常感谢您的帮助！非常感谢。

Answer 1

我最终能够弄清楚发生了什么。显然，在Safari中，每当我从"分区过滤器"(组合框(中选择分区时，我都会用setPartition(event.target.innerText)更改分区状态。

Safari的问题是它会附加一个返回字符"↵'在分区字符串的末尾，而在其他浏览器中则不会。每当打印字符串时，这个字符都不会出现，但我通过打印字符串长度找到了它。这就是比较不起作用的原因！