特殊字符被添加到反应表空行中答案

【问题标题】：Special Character is getting added in react-table empty rows特殊字符被添加到反应表空行中
【发布时间】：2018-09-06 04:23:28
【问题描述】：

我有一个 HTML 页面，它获取 RESTful 服务数据并呈现为 react-table。当 RESTful 服务响应不包含任何数据时，react-table 在 span 标签下的空行中显示特殊字符 Ø

我在 HTML 页面的 head 标签中包含了 charset=UTF-8。但这并没有解决问题。

我正在使用来自https://cdnjs.com/libraries 的所需库

反应表代码：

<script type="text/babel" charset="utf-8">
class App extends React.Component {
  render() {
    return (
      <div>
        <ReactTable.default
          data={[RESTful response JSON]}
          columns={[
            {
              Header: 'Functional Test Results',
              columns: [
                {
                  Header: 'Process Date',
                  accessor: 'processDate'
                },
                {
                  Header: 'Test Category',
                  accessor: 'testCategory'
                },
                {
                  Header: 'Testcase Name',
                  accessor: 'testCaseName'
                },
                {
                  Header: 'Test Subcase Name',
                  accessor: 'testSubCaseName'
                },
                {
                  Header: 'Status',
                  accessor: 'status'
                },
              ],
            }
          ]}
          defaultPageSize={10}
          className="-striped -highlight"
          showFilters={true}
          noDataText="Oh Noes! No data available."
          filterable={true}
        />
        <br />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));
</script>

有人可以建议我解决如何从空的反应表行中删除特殊字符的方法。

【问题讨论】：

为什么不使用简单的if statement 来检查数据是否为空（null 或undefined）。如果它最终是true，则显示一个空字符串，例如" "。或/并检查那些特殊字符，它们最终存在（真），然后什么也不显示。您可以使用JS 或/ 和CSS 和display: none 或类似visibility: hidden; ..etc 来实现这一点
为 react-table 启用可过滤选项时也会出现问题。当尝试在列中搜索某个字符串时，如果相应的字符串与列中的任何值都不匹配，则在列单元格中显示特殊字符。
请显示您的 [RESTful 响应 JSON] 代码。我认为问题出在哪里

标签： javascript reactjs react-table

【解决方案1】：

试试这个。您可以自定义它以满足您的需求。这实际上完全取决于您的 API 响应及其结构，但运行代码 sn-p 并查看这是否对您有用。我真的希望它会。

let apiData = 'ÃdaÃtÃaÃ';

function cleanString(input) {
    var output = "";

    for (let i=0; i<input.length; i++) {
        if (input.charCodeAt(i) <= 127) {
        output += input.charAt(i);
        }
    }
    return output;
}


console.log(cleanString(apiData));

【讨论】：

【解决方案2】：

通过添加如下所示的 PadRowComponent 道具，修复了该问题。

<ReactTable.default
              data={filteredData}
              columns={columns}             
              className="-striped -highlight"
              PadRowComponent= {<span>&nbsp;</span>}
           />

【讨论】：