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'を読み取れません
関連した質問
- React:アクションはプレーンオブジェクトでなければなりません
- TypeError:react-reduxで未定義のプロパティ 'map'を読み取れません
- Reduxで未定義のプロパティ「タイプ」を読み取れません
- redux-toolkitのcreateSliceメソッドを使用して、さまざまなレデューサー関数で単一アクションタイプを使用する方法
- ReduxからのReact状態の更新により、最大更新深度がエラーを超えました
- React-Redux:ネストされた配列を別の配列に割り当てるアクションをディスパッチしようとしているときに無効なフック呼び出し
- javascriptプロパティが挿入されたURLをフェッチしますが、UTF-8文字がコンソールに表示され続け、404が発生します
- NextJsはサーバー側のレンダリングを介してFacebookタグをレンダリングします
- React Nativeエラー失敗したプロップタイプ:タイプ `array`の無効なプロップ` children`が `Overlay`に提供されました。
- svg要素の幅と高さを制御する方法
私のアクションでは、非同期アクションにredux-thunkを使用する必要があります。
Reducerでは、init状態を宣言する必要があります