在反应组件中单击按钮后道具延迟

Question

我正在为我的一个项目使用 react redux。 我正在使用mapStateToProps()来获取道具。 但是道具延迟了。 起初当我console.log道具是空的但几秒钟后它们被加载并且我有一些道具。 我需要在单击按钮后立即加载道具。 我的代码看起来像这样。

import React from "react";

import { connect } from "react-redux";

import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import SearchBar from "./search-bar";
import NavBar from "../navBar";
import Footer from "../footer";
import {
  searchProduct,
  fetchProducts,
  setLoading,
  saveKeyword,
  filterProducts
} from "../../../_actions/search.action";
import { Link } from "react-router-dom";


class ContainingResult extends React.Component {


  onClick = e => {


    this.props.fetchProducts(this.props.text);
    this.props.saveKeyword(this.props.text);
  };
  render() {
    const { text, product } = this.props;
    console.log("TEXT", text);
    const { loading } = this.props;

//Here these props are not loaded at first. But after some seconds I get them
    console.log("Containing", this.props);
    return (
      <React.Fragment>
        <NavBar></NavBar>
        <SearchBar></SearchBar>
        <div class="card">
          <h5 class="card-header">Results</h5>
          <div class="card-body">
            <h5 class="card-title">{text}</h5>
            <p class="card-text">
              With supporting text below as a natural lead-in to additional
              content.
            </p>
            <Link to={`/dashboard/search?q=${text}`}>
              <button onClick={this.onClick} class="btn btn-primary">
                See More
              </button>
            </Link>
          </div>
        </div>
        <Footer></Footer>
      </React.Fragment>
    );
  }
}

const mapStateToProps = state => ({
  loading: state.product.loading,
  text: state.product.text,
  product: state.product.products
});

export default connect(mapStateToProps, {
  searchProduct,
  fetchProducts,
  setLoading,
  saveKeyword,
  filterProducts
})(ContainingResult);

动作.js

export const fetchProducts = text => dispatch => {
  console.log("Called from ", text);

  const api = `/Search?searchString=${text}`;

  axios
    .get(apiBaseUrl + api, { headers: { Authorization: `Bearer ${token}` } })

    .then(res => {
      console.log("hello", api);
      try {
        dispatch({
          type: FETCH_PRODUCTS,
          payload: res
        });
      } catch (err) {
        console.log("error", err);
      }
    });
};

减速器.js

import {
  SEARCH_PRODUCTS,
  FETCH_PRODUCTS,
  LOADING,
  PAGINATE,
  PRODUCT_DETAILS,
  USER_PROFILE,
  KEYWORD,
  FILTERED_PRODUCTS
} from "../_actions/types";

const initialState = {
  text: "",
  products: [],
  loading: false,
  product: [],
  profile: [],
  filter: [],

  pagination: {
    totalRecords: 0,
    totalPages: 0,
    pageLimit: 4,
    currentPage: 1,
    startIndex: 1,
    endIndex: 0
  }
};



export default (state = initialState, action) => {

 case FETCH_PRODUCTS:
      console.log(
        "action -- FetchProducts",
        action,
        "state -- FetchPro",
        state
      );
      return {
        ...state,
        products: action.payload,
        loading: false,
        totalRecords: action.payload.length
             };

}

Answer 1

我想this.props.fetchProducts(this.props.text); 正在执行一些异步操作，而您正在等待SUCCESS操作来更新存储。

如果是这种情况，您可能希望切换到乐观更新。 这意味着更新REQUEST操作的状态，并希望请求成功。 在FAILURE操作中，您应该将状态返回到它的原始值。

编辑：既然整个代码都可用，您应该在返回状态的switch语句中有一个default 。

export default (state = initialState, action) => {
  switch(action.type) {
    case FETCH_PRODUCTS:
      console.log(
        "action -- FetchProducts",
        action,
        "state -- FetchPro",
        state
      );
      return {
        ...state,
        products: action.payload,
        loading: false,
        totalRecords: action.payload.length
             };
    default:
        return state;
  }
}