Question

我有一个HTML页面，该页面可获取RESTful服务数据并将其呈现为react-table。当RESTful服务响应不包含任何数据时，反应表在span标记下的空行中显示特殊字符，如下所示： Ã

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

中的必需库

反应表代码：

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

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

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>}
           />

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

2 个答案: