Невозможно получить пользователей GitHub, используя Redux - PullRequest
Новая
       8

Невозможно получить пользователей GitHub, используя Redux

0 голосов
/ 09 апреля 2019

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

Ниже приведен мой код для компонента, действия, редуктора 

class Navbar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: ""
    };
    this.searchUser = this.searchUser.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  componentDidMount(){
      console.log(this.props.users)
  }

  searchUser(e) {
    e.preventDefault();
    this.props.searchUser(this.state.userName);
    this.setState({ userName: "" });
  }

  onChange(e) {
    this.setState({ [e.target.id]: e.target.value }, () =>
      console.log(this.state.userName)
    );
  }

  render() {
    return (
      <nav className="navbar fixed-top navbar-expand-md navbar-light bg-primary">
        <div className="container">
          <h4>Github Search</h4>
          <form className="form-inline my-1 my-lg-0" onSubmit={this.searchUser}>
            <div className="input-group add-on">
              <input
                type="search"
                className="form-control mr-sm-2 border-right-0 border"
                id="userName"
                placeholder="Search User..."
                aria-label="Search"
                onChange={this.onChange}
                value={this.state.userName}
              />
            </div>
          </form>
        </div>
      </nav>
    );
  }
}

const mapStateToProps = state => {
  return {
    users: state.users
  };
};

export default connect(
  mapStateToProps,
  { searchUser }
)(Navbar);

-------------------------------------    
export const searchUser = userName => dispatch => {
  console.log("----" + userName);
  fetch("https://api.github.com/search/users?q=" + userName)
    .then(res => res.json())
    .then(users =>
      dispatch({
        type: "FETCH_USERS",
        payload: users.items
      })
    );
};
--------------------------------------------    
export default function(state = { users: [] }, action) {
  switch (action.type) {
    case "FETCH_USERS":
      return {
        ...state,
        users: action.payload
      };

    default:
      return state;
  }
}
--------------------------------------------

Я могупередать введенное имя пользователя действиям, но после отправки появляется некоторая ошибка.

...