我想从Redux商店获得错误状态，但当我点击按钮时，它显示未定义，但第二次点击后，它显示错误消息，状态来自Redux商店，错误显示在组件的HTML部分，但没有显示在按钮www.example.com上click.is有一种方法可以处理这个问题。我坚持了3天。

const { createsponsors, error } = props;
  const handleSubmit = () => {
    createsponsors(data);
    console.log("Error", error?.message); //here it says undefined on first click on second click it shows error msg
  };
 return (
    <>
      <div className={style.shadow}>
        <center>
          <h1>Create Sponosor</h1>
          <br></br>
          <div>
            {error ? (
              <div className="alert alert-danger" role="alert">
                <b>{error?.name} </b> // Error showing here 
                {error?.message}
              </div>
            ) : (

            )}
          </div>

          <br></br>
        </center>
        <div className="row">
          <div className="col-xl-5 col-lg-5 col-md-12 col-sm-12 col-12">
            <div className={style.btncenter}>
              <img
                src={data.image_link}
                className={style.SponsorForm_image}
                alt="Brand Img"
              ></img>
            </div>
            <br></br>
            <div className={style.btncenter}>
              <input
                type="file"
                ref={ref}
                className={style.disnone}
                onChange={(e) => handleSelectImage(e.target.files[0])}
              ></input>
              <Button variant="dark" onClick={handleClick}>
                Select
              </Button>
            </div>
          </div>
          <div className="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
            <div className="form-group">
              <input
                placeholder="Title"
                type="text"
                className="form-control"
                onChange={({ target: { value } }) => {
                  handlechnagesponsors("title", value);
                }}
              />
            </div>
            <div className="form-group">
              <textarea
                placeholder="Description"
                type="text"
                className="form-control"
                onChange={({ target: { value } }) => {
                  handlechnagesponsors("description", value);
                }}
              ></textarea>
            </div>
            <div className="form-group">
              <div className="input-group">
                <input
                  placeholder="Add member benefit"
                  className="form-control"
                  value={addbenifit}
                  onChange={(e) => {
                    setAddBenifit(e.target.value);
                  }}
                />
                <button
                  type="button"
                  onClick={() => AddBenifits("add")}
                  className={`${style.btnspaceupdate} btn btn-dark`}
                >
                  Add
                </button>
              </div>
              <br></br>

              <div className="form-group">
                <center>
                  <h2>Member Benifits</h2>
                </center>
                {data.member_benifits?.map((val, index) => {
                  return (
                    <div key={index}>
                      <div className="input-group">
                        <input
                          className="form-control"
                          value={val}
                          defaultValue={val}
                          type="text"
                        />
                        <button
                          type="button"
                          className={`${style.btnspaceupdate} btn btn-dark`}
                          onClick={() => {
                            AddBenifits("delete", index);
                          }}
                        >
                          Delete
                        </button>
                      </div>
                      <br />
                    </div>
                  );
                })}
              </div>

              <div className="form-group">
                <div className="form-row">
                  <div className="form-group col">
                    <input
                      placeholder="Weblink"
                      type="text"
                      className="form-control"
                      onChange={({ target: { value } }) => {
                        handlechnagesponsors("webLink", value);
                      }}
                    />
                  </div>
                  <div className="form-group col">
                    <input
                      placeholder="Contact"
                      type="text"
                      className="form-control"
                      onChange={({ target: { value } }) => {
                        handlechnagesponsors("contact", value);
                      }}
                    />
                  </div>
                </div>
                <div className="form-group">
                  <input
                    placeholder="Priority"
                    min="1"
                    type="number"
                    className="form-control"
                    onChange={({ target: { value } }) => {
                      handlechnagesponsors("priority", value);
                    }}
                  />
                </div>
                <div className={`${style.btncenter} form-group`}>
                  <Button
                    type="button"
                    variant="dark"
                    disabled={clicked}
                    onClick={() => {
                      handleSubmit();
                    }}
                  >
                    Create Sponosor
                  </Button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <ToastContainer autoClose={2000} />
      </div>
    </>
  );
const mapStateToProps = (state) => {
  const { sponsorsDataReducer } = state;
  return {
    isFetching: sponsorsDataReducer.isFetching,
    error: sponsorsDataReducer.error,
    sponsor: sponsorsDataReducer.sponsor,
  };
};
const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({ createsponsors }, dispatch);
};

减速器

import ACTION from "../actions/actionTypes";
a
const initialState = {
  sponsor: [],
  isFetching: false,
  error: null,
};
export default function (state = initialState, action) {
  switch (action.type) {
    case ACTION.CREATE_SPONSORS_REQUEST: {
      return {
        ...state,
        isFetching: true,
        error: null,
      };
    }
    case ACTION.CREATE_SPONSORS_RESPONSE: {

      return {
        ...state,
        isFetching: false,
        sponsor: action.data,
        error: null,
      };
    }
    case ACTION.CREATE_SPONSORS_ERROR: {
      return {
        ...state,
        isFetching: false,
        error: action.error,
      };
    }

    default: {
      return state;
    }
  }
}

动作

export const createsponsors = (data) => {
  return {
    type: ACTION.CREATE_SPONSORS,
    data: data,
  };
};

Saga

import { put, call } from "redux-saga/effects";
import ACTION from "../actions/actionTypes";
import { apiCreateSponsor } from "../../Api/apiController";

export function* createNewSponsor(action) {
  yield put({ type: ACTION.CREATE_SPONSORS_REQUEST });
  try {
    const { data } = yield apiCreateSponsor(action.data);

    yield put({
      type: ACTION.CREATE_SPONSORS_RESPONSE,
      data: data,
    });

    yield call(forward, "/sponsors");
  } catch (e) {
    yield put({ type: ACTION.CREATE_SPONSORS_ERROR, error: e.response.data });
  }
}
const forward = (location) => {
  window.top.location.href = `/files/admin/#${location}`;
};