特殊字符将被添加到react-table空行中

Question

我有一个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>

有人可以建议我解决如何从空的react-table行中删除特殊字符。

Answer 1

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

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));

Answer 2

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

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