0

我正在使用 redux 来获取异步数据和响应。在下面的组件中，当我发布配方和从服务器时，我通过 redux 两次成功模式弹出窗口获得响应。减速器仅在我检查完所有内容后才运行，只有组件有问题。问题可能出在生命周期方法上。

    import React, { Component } from 'react';
    import 'antd/dist/antd.css';
    import {withRouter} from 'react-router-dom';
    import {connect} from 'react-redux';
    import * as  actionCreators from '../../actions/recipe-action/index';
    import { Modal, Button } from "antd";
    import Spinner from '../../UI/spinner';
    
    class PostRecipe extends Component {
    
      state = {
        url: '',
        visible: false,
      }
    
      showModal = () => {
        this.setState({ visible: true });
      };
    
      onChangeHandler = (e) => {
        this.setState({[e.target.name]: e.target.value});
      }
    
      handleOk = e => {
        this.props.recipe(this.state.url);
        this.setState({url: ""});
        this.setState({ visible: false });
      };
    
      handleCancel = e => {
        this.setState({ visible: false });
      };
    
      render() {
    
        const { postRecipes } = this.props;
    
        if(postRecipes.loading) {
          return <Spinner />;
        }else if(postRecipes.success.ok) {
         // this success model popup twice after uploading the recipe
          Modal.success({
            content: "Recipe Uploaded"
          });
          
        }else if(postRecipes.failure.error) {
          Modal.error({
            title: "Error while uploading recipe",
          });
        }
    
        return (
          <div>
            <div>
              <Button type="primary" onClick={this.showModal}>
                Add Recipe
              </Button>
              <Modal
                title="Add Recipe"
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                >
                <input
                  style={{ width: "100%", padding: "5px", fontSize: "15px" }}
                  type="text"
                  placeholder="enter the url"
                  name="url"
                  value={this.state.url}
                  onChange={this.onChangeHandler}
                />
              </Modal>
            </div>
          </div>
        );
      }
    }
    
    
    const mapStateToProps = ({ postRecipeReducers }) => {
      const { recipe: { post: postRecipes } } = postRecipeReducers;
        return {
          postRecipes
        }
    };
    
    const mapStateToDispatch = dispatch => {
        return {
            recipe: (url) => dispatch(actionCreators.postRecipes(url))
        }
    }
    
    export default withRouter(connect(mapStateToProps, mapStateToDispatch)(PostRecipe));


// my action creators

import {POST_RECIPE_LOADING, POST_RECIPE_SUCCESS, POST_RECIPE_FAILURE, POST_RECIPE_RESET} from '../types';
import {GET_RECIPE_LOADING, GET_RECIPE_SUCCESS, GET_RECIPE_FAILURE, GET_RECIPE_RESET} from '../types';
import Parse from 'parse';

export const postRecipes = (url) => async(dispatch) => {

    try {
        dispatch({type: POST_RECIPE_LOADING, payload: null});
        const {data} = await Parse.Cloud.run('post_recipe', {url: url});
        dispatch({type: POST_RECIPE_SUCCESS, payload: data});

    } catch(e) {
        dispatch({type: POST_RECIPE_FAILURE, payload: {message: e.message}})
    }
}

export const getRecipes = () => async (dispatch) => {
    
    try {
        dispatch({type: GET_RECIPE_LOADING, payload: null});
        const {data} = await Parse.Cloud.run('get_recipe');
        dispatch({type: GET_RECIPE_SUCCESS, payload: data});

    } catch(e) {
        dispatch({type: GET_RECIPE_FAILURE, payload: {message: e.message}})
    }
    
};
4

2 回答 2

0

尝试这个：

handleOk = e => {
   this.props.recipe(this.state.url);
   this.setState({url: "", visible: false});
};

state类的变量是一个有两个键的对象：url和visible。您必须同时设置两者。

于 2020-07-08T14:15:36.033 回答
0

我会尝试实现一个构造函数来确保你已经this绑定到你的本地状态。

在这个代码块中，

handleOk = e => {
        this.props.recipe(this.state.url);
        this.setState({url: ""});
        this.setState({ visible: false });
      };

你可以像这样在一行中设置整个状态，

handleOk = e => {
       this.props.recipe(this.state.url);
       this.setState({url: "", visible: false});
}

我不知道这会解决你的问题。只是有点家务。

于 2020-07-08T14:17:12.313 回答