Специальный символ добавляется в пустые строки таблицы реакций - PullRequest
Новая
       10

Специальный символ добавляется в пустые строки таблицы реакций

0 голосов
/ 06 сентября 2018

У меня есть HTML-страница, которая извлекает данные службы RESTful и отображает их в качестве таблицы реакции. Когда ответ службы RESTful не содержит никаких данных, таблица реакции отображает специальный символ в пустых строках под тегом span как Ã ‚

Я включил charset = UTF-8 в тег head страницы HTML. Но это не решило проблему.

Я использую необходимые библиотеки из 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>

Может кто-нибудь предложить мне обходной путь избавления от специального символа из пустых строк таблицы реакций.

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Добавив реквизиты PadRowComponent, как показано ниже, исправлена ​​проблема. 

<ReactTable.default
              data={filteredData}
              columns={columns}             
              className="-striped -highlight"
              PadRowComponent= {<span>&nbsp;</span>}
           />
0 голосов
/ 06 сентября 2018

Попробуй это. Вы можете настроить его под свои нужды. На самом деле все зависит от вашего ответа 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));
...