如何处理第二个 onClick 以使用 reactJS 和 redux 发起 API 请求？

Question

我是 redux 的新手，我正在创建一个小应用程序来呈现 API onClick。我调用 componentDidMount 中的动作创建者，它能够在第一次点击时生成所需的结果。但是，因为 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);

调用动作创建者

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 中，这只会在 Creational 生命周期中工作 的组件， 现在你可以做两件事。

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);