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

Question

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

案例如下：用户访问Summary页面，生成了一些概览图。在该页面中，用户可以 select 一个选项来过滤摘要的“分区”，从而仅生成关于该给定分区的图表。但是，select在 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 is not an object (evaluating 'data[temp]["usage"]')，这没有意义，因为它在所有其他浏览器上都能正常工作。

我想也许 Safari 与 React 不兼容，但从我在他们的文档中看到的，他们确实支持浏览器。

非常感谢任何帮助！谢谢！

Answer 1

我最终能够弄清楚发生了什么。显然在 Safari 中，每当我从 'partition filter'（组合框）中选择一个分区时，我都会用 setPartition(event.target.innerText).

更改分区状态

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

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

Safari TypeError or browser bug with React website

safari

runtime-error

web

reactjs