bugfix> javascript > 投稿

APIからユーザーを検索するためのアプリケーションを作成しました。反応と再利用を使用します。この問題は、null入力で検索をクリックしたとき、または同じ文字列を検索したときに始まります。以下に必要なすべてのデータがあります。自分で解決できないのではないかと心配しています。

俺の減速機

import {FETCH_USERS} from '../actions/index';
export default function(state = [], action) {
  switch (action.type){
    case FETCH_USERS:
      return {...state, users: action.payload.data.items
    }
  }
  return state;
}

俺のアクション 減速機に関連する:

import axios from 'axios';
const root_url = `https://api.github.com/search/users`;
export const FETCH_USERS = 'FETCH_USERS';
export function fetchUsers(login) {
const request = axios.get(`${root_url}?q=${login}`);
// const andSoOn = request.data;
  return {
    type: FETCH_USERS,
    payload: request
  }
}

およびコンテナ:

import React,{Component} from 'react';
import {connect} from 'react-redux';
import _ from 'lodash';
import Details from '../../components/Details/Details';
import classes from './UserList.css';
class UserList extends Component {
  state = {
    show: {}
  }
  showContentFunction(index) {
    const itemToShow = {
      ...this.state.show,
      [index]: true
    };
    this.setState({show: itemToShow})
  }
  render(){
    return (
      _.map(this.props.users, user=> user.slice(0,10).map((e,index) => (
        <div
          className={classes.Items}
          key={e.id}
          onClick={() => this.showContentFunction(e.id)}
          >
            { !this.state.show[e.id] ? e.login : null}
            { this.state.show[e.id] ? <Details
                                        className={classes.Details}
                                        name={e.login}
                                        image={e.avatar_url}
                                        score={e.score}
                                        link={e.html_url}
                                      /> : null}
        </div>
      )
    )
  )
  )
  }
}

function mapStateToProps(state) {
  return {
    users: state.users
  }
}
export default connect(mapStateToProps)(UserList);

文字列なしのボタンまたは同じ文字列の秒時間をクリックするとエラーが発生します: 未処理の拒否(TypeError):未定義のプロパティ 'items'を読み取れません

回答 1 件
  • 私のアクションでは、非同期アクションにredux-thunkを使用する必要があります。

    export function fetchUsers(login) {
    // const andSoOn = request.data;
      return (dispatch, getState) => {
        const request = axios.get(`${root_url}?q=${login}`);
        //You make request here
        
        //when received data from server then return data with type of action
        return {
          type: FETCH_USERS,
          payload: data
        }
        
      }
    }
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
    
    

    Reducerでは、init状態を宣言する必要があります

    initState = {
        users: []
    }
    
    

あなたの答え