聞きたいこと
aタグのonClick属性に、actionで定義した関数を指定し、引数を渡したいと思っています。
下に書いてあるような実装をしているのですが、エラーになってしまいうまく実行できません。
どなたかヒント等ありましたら教えていただきたいです。
コード・エラー内容
- Components
JavaScript
1import React, { Component } from 'react'; 2import { connect } from 'react-redux'; 3import _ from 'lodash'; 4 5import { readLanguages, readRepositories } from '../actions'; 6 7class LanguagesIndex extends Component { 8 componentDidMount() { 9 this.props.readLanguages() 10 } 11 12 renderLanguages() { 13 return _.map(this.props.languages, language => ( 14 <React.Fragment> 15 |<a href="#" onClick={this.props.readRepositories(language.id)}>{language.name}</a> !!!←ここのaタグのonClickに対してアクションで定義したreadRepositories関数を割り当てたい 16 </React.Fragment> 17 )) 18 } 19 20 render() { 21 省略 22} 23 24const mapStateToProps = state => ({ languages: state.languages }) 25const mapDispatchToProps = ({ readLanguages, readRepositories }) 26 27export default connect(mapStateToProps, mapDispatchToProps)(LanguagesIndex)
- Action
JavaScript
1import axios from 'axios'; 2 3export const READ_REPOSITORIES = 'READ_REPOSITORIES'; 4export const READ_LANGUAGES = 'READ_LANGUAGES'; 5 6const ROOT_URL = 'https://api.server.com'; 7const OPTIONS = { 8 headers: { 9 'Access-Control-Allow-Origin' : '*', 10 'Access-Control-Allow-Methods' : 'GET,PUT,POST,DELETE,PATCH,OPTIONS' 11 } 12}; 13 14export const readRepositories = () => async (dispatch, id=1) => { !!!←ここでidとしてパラメーターを受け取れるようにしたい 15 const response = await axios.get(`${ROOT_URL}/repositories?id=${id}`, OPTIONS); 16 // console.log(Config()); 17 dispatch({ type: READ_REPOSITORIES, response }); 18} 19 20export const readLanguages = () => async dispatch => { 21 const response = await axios.get(`${ROOT_URL}/languages`, OPTIONS); 22 dispatch({ type: READ_LANGUAGES, response }); 23} 24
- エラー内容
index.js:2178 Warning: Expected `onClick` listener to be a function, instead got a value of `object` type. in a (at languages_index.js:15) in td (at languages_index.js:33) in tr (at languages_index.js:26) in tbody (at languages_index.js:25) in table (at languages_index.js:24) in LanguagesIndex (created by Connect(LanguagesIndex)) in Connect(LanguagesIndex) (at index.js:19) in div (at index.js:18) in Provider (at index.js:17)
回答1件
あなたの回答
tips
プレビュー