对于我的代码，我没有在 react js 中获得分页和搜索栏

Question

//这是我的代码//

class TableList extends Component {

  constructor(props) {
    super(props);
    //var totalPages = 100 / 10; // 10 page numbers

    this.state = {
      query: "",
      countries: [],
      searchString:[],

      currentPageNumber: 1,
      pageOfItems: [],
      totalItems: 4,
      itemsPerPage: 10

    }



 this.onChangePage = this.onChangePage.bind(this);
  }
  onChangePage(pageOfItems) {

    this.setState({ pageOfItems: pageOfItems });
}

  handleInputChange = (event) => {
    this.setState({
        query: event.target.value
    },()=>{
  this.filterArray();
})

}
handleSelect(number) {
  console.log('handle select', number);
  this.setState({currentPageNumber: number});
}
  componentDidMount() {
    const apiUrl = 'https://indian-cities-api-nocbegfhqg.now.sh/cities';
    fetch(apiUrl)
      .then(res => res.json())
      .then(
        (result) => {

          this.setState({
            countries: result,
            searchString:result,
            currentPageNumber:result.currentPageNumber,
            totalItems: result.totalItems,
            itemsPerPage: result.itemsPerPage
          });

        },

      )
  }
  filterArray = () => {
    let searchString = this.state.query;
    let result = this.state.countries;


    if(searchString.length > 0){

      result = result.filter(searchString);
this.setState({
  result
})
  }

}

  render() {
    const { countries} = this.state;
    let totalPages = Math.ceil(this.state.totalItems / this.state.numItemsPerPage);


      return(

        <div>
          <div className="container">

          </div>
          <h2>countrie List</h2>
          <form>
                <input type="text" id="filter" placeholder="Search for..."  onChange={this.handleInputChange}/>
            </form>
          <Table>
          <Pagination
                    bsSize="medium"
                    items={totalPages}
                    activePage={this.state.currentPageNumber} onSelect={this.handleSelect.bind(this)}/>
            <thead>
              <tr>
                <th>#ID</th>
                <th>countrie Name</th>
                <th>Code</th>
                <th>States</th>
              </tr>
            </thead>
            <tbody>
              {countries.map(countrie => (
                <tr key={countrie.City}>
                  <td>{countrie.sno}</td>
                  <td>{countrie.City}</td>
                  <td>{countrie.State}</td>
                  <td>{countrie.District}</td>
                </tr>
              ))}

            </tbody>

          </Table>
        </div>
      )
              }

            }           
      export default TableList;

//即将到来的错误是 警告：遇到两个孩子使用相同的钥匙，`Wadi`。密钥应该是唯一的，以便组件在更新时保持其身份。非唯一键可能会导致子项被复制和/或省略 - 该行为不受支持，并且可能在未来版本中更改

Answer 1

简短：

• 搜索 - 存储在 this.state.result 中的过滤数据 - 未用于渲染

  this.setState({ result })

  因为{ result } 是{ result: result } 的缩写并且这很好 ...覆盖this.state.countries 会导致源数据丢失（需要重新获取）

  render 获取/使用this.state.countries - 始终是完整数据集，不通过搜索过滤，不按页面范围划分

  您需要在获取后将一些数据复制到this.state.result（而不是复制countries 引用）

• 分页 - 'results'（与上述不正确）记录未被基于currentPage的范围子选择

使用 react 开发工具检查浏览器中的状态变化（检查是否正常工作）。