如何处理第二个onClick使用reactJS和redux启动API请求

Question

我是redux的新手，我正在创建一个小应用程序来呈现API onClick。我调用组件DidMount中的动作创建者，它能够在第一次单击时生成所需的结果。但是，因为componentDidMount只渲染一次，所以第二次"单击"时不会发生任何事情。

下面的代码是这个函数中包含名为"handleFavClick"的onClick的组件。两个操作创建者被触发，其中一个用于识别被单击的按钮，并将其添加到第二个操作创建者中使用的状态，该创建者获得API。

import React from 'react';
import { connect } from 'react-redux';
import '../stylesheet/FavoriteList.css';
import { uploadGif } from '../actions';
import Display from './Display';


class FavoriteList extends React.Component {

handleFavClick = (id) => {
this.props.uploadGif(id);
this.displayGif();
}
displayGif = () => {
this.setState({display: true});
};

renderList = (callback) => {
let fullList = this.props.favsList.map(function(cur, index) {
return (
<button onClick={function() {
callback(index);
}} className="list-item" key={index}>{cur}</button>
)
});
return fullList;
}
render() {
return (
<div>
<div className="favs">
<h2>Favorite List</h2>
<ul className="unordered-list">
{this.renderList(this.handleFavClick)}
</ul>
</div>
{this.state.display && <Display />}
</div>
)
}
}
const mapDispatchToProps = {
uploadGif,
}
const mapStateToProps = (state) => {
return {
favsList: state.myFirstReduxKey,
}
};
export default connect(mapStateToProps, mapDispatchToProps)(FavoriteList);

显示组件(在onClick被触发之后，该组件被呈现并且显示被从API请求接收的数据更新)

import React from 'react';
import { connect } from 'react-redux';
import { getGif } from '../actions';
class Display extends React.Component {
componentDidMount() {
const list = this.props.gifList;
const item = this.props.chosenGif;
this.props.getGif(list[item]);
}
.
.
.
.
const mapStateToProps = (state) => {
return {
gifList: state.myFirstReduxKey,
chosenGif: state.uploadGif,
gifs: state.getGif
}
}

export default connect(mapStateToProps, { getGif })(Display);

调用Action Creator

export const getGif = (action) => async dispatch => {
const key = 'GRghbyFwY5CEhc1h7ngS9KBEK9s2W3zBa'
const response = await gifApi.get(`search?q=${action}&api_key=${key}`)
.then(function(response) {
return response.data.data
});

dispatch({ type: GET_GIF, payload: response})
};

最后，我想知道redux程序员是如何处理客户端点击一个按钮，它会渲染一些东西，然后客户端点击一一个新按钮，删除之前点击的渲染并渲染新信息。

Answer 1

您的代码看起来很好，但有一件事您需要更改才能使其正常工作。正如您所说，由于您的代码在componentDidMount中，因此这只能在组件的创造性生命周期中工作，现在你可以做两件事。

1.**将this.props.getGif(list[item])移动到**render()(推荐)：

import React from 'react';
import { connect } from 'react-redux';    
import { getGif } from '../actions';
class Display extends React.Component {
render(){
const list = this.props.gifList; //this code gets executed every time
const item = this.props.chosenGif;
this.props.getGif(list[item]);
}
}
const mapStateToProps = (state) => {
return {
gifList: state.myFirstReduxKey,
chosenGif: state.uploadGif,
gifs: state.getGif
}
}

export default connect(mapStateToProps, { getGif })(Display);

2.有一个单独的处理程序，并让componentDidMount和componentDidUpdate调用它：

import React from 'react';
import { connect } from 'react-redux';
import { getGif } from '../actions';
class Display extends React.Component {
componentDidMount() {
this.loadGifHandler();
}
componentDidUpdate() {
this.loadGifHandler();
}

loadGifHandler = () => {
const list = this.props.gifList;
const item = this.props.chosenGif;
this.props.getGif(list[item]);
}
.
.
.
.
const mapStateToProps = (state) => {
return {
gifList: state.myFirstReduxKey,
chosenGif: state.uploadGif,
gifs: state.getGif
}
}

export default connect(mapStateToProps, { getGif })(Display);