Question

我正在尝试通过提供用户名来获取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;
  }
}
--------------------------------------------

我可以将提交的用户名传递给操作，但是在发送后似乎有些错误。

无法使用Redux获取github用户

0 个答案: