时间戳

首页 > 解决方案 > 我的搜索输入和分页没有触发 Reactjs 中的任何内容

reactjs - 我的搜索输入和分页没有触发 Reactjs 中的任何内容

问题描述

我对反应还很陌生。我的搜索输入和分页按钮没有触发任何内容，控制台中也没有出现任何内容，我的代码有什么问题？

我尝试将每个功能都放入App.js其中以使其更清洁。

应用程序.js

import React, { Component } from "react";
import List from './List';

let API = 'https://swapi.co/api/people/';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      results: [],
      search: '',
      currentPage: 1,
      todosPerPage: 3
    };
    this.handleClick = this.handleClick.bind(this);
    this.updateSearch = this.updateSearch.bind(this);
  }

  componentWillMount() {
    this.fetchData();
  }

  fetchData = async () => {
    const response = await fetch(API);
    const json = await response.json();
    this.setState({ results: json.results });
  };

  handleClick(event) {
    this.setState({
      currentPage: Number(event.target.id)
    });
  }

  updateSearch(event) {
    this.setState({ 
      search: event.target.value.substr(0, 20) 
    });
  }

  render() {
    return (
      <div>
        <List data={this.state} />
      </div>
    );
  }
}

export default App;

List.js

import React, { Component } from 'react';
import Person from './Person';

class List extends Component {
    render() {
    const { data } = this.props;

    const { results, search, updateSearch, handleClick, currentPage, todosPerPage } = data;
    const indexOfLastTodo = currentPage * todosPerPage;
    const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
    const currentTodos = results.slice(indexOfFirstTodo, indexOfLastTodo).filter(item => {
      return item.name.toLowerCase().indexOf(search) !== -1;
    });

    const renderTodos = currentTodos.map((item, number) => {
      return (
        <Person item={item} key={number} />
      );
    });

    const pageNumbers = [];
    for (let i = 1; i <= Math.ceil(results.length / todosPerPage); i++) {
      pageNumbers.push(i);
    }

    const renderPageNumbers = pageNumbers.map(number => {
      return (
        <li className="page-link" key={number} id={number} onClick={handleClick} style={{cursor: "pointer"}}>{number}</li>
      );
    });

    return (
      <div className="flex-grow-1">
        <h1>Personnages de Star Wars</h1>
        <form className="mb-4">
          <div className="form-group">
            <label>Rechercher</label>
            <input 
            className="form-control" 
            type="text"
            placeholder="luke skywalker..."
            value={search}
            onChange={updateSearch}
            />
          </div>
        </form>
        <div className="row mb-5">{renderTodos}</div>
        <nav aria-label="Navigation">
          <ul id="page-number" className="pagination justify-content-center">{renderPageNumbers}</ul>
        </nav>
      </div>
    );
  }
}

export default List;

如果我输入它，输入的值不会改变一点，如果我右键单击页码，控制台会得到我Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Element': '#4' is not a valid selector.

任何想法 ？

标签： reactjs

解决方案

问题是，在List课堂上你尝试取走updateSearch和handleClick取走data（反过来来自this.props）。但是updateSearch和handleClick从来没有放在里面data。如果您将这些方法中的任何一个记录到控制台，您将看到它们是未定义的。

要解决此问题，您需要传递updateSearch和handleClickfrom Appto List。你可以通过在dataprops 中包含方法，或者直接将它们作为它们自己的 props 传递（我会推荐）来做到这一点。

例如，您可以将 的render方法更改为App如下所示：

render() {
    return (
      <div>
        <List
          data={this.state}
          updateSearch={ this.updateSearch }
          handleClick={ this.handleClick }
        />
      </div>
    );
}

然后在你的render方法中List可以这样做：

const { data, updateSearch, handleClick } = this.props;

并从下面的解构中删除这两种方法的定义data。

推荐阅读