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中，这只会在创造生活中起作用周期，现在您可以做两件事。

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

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

1 个答案: