为什么这个来自 Redux store 的变量不在 React 页面的 `this.props` 中？

Question

我有一个变量，我相信它已使用 Redux 操作和缩减器正确写入我的 Redux 存储。但出于某种原因，它永远不会成为 React 页面上的道具的一部分。给定以下代码，可能是什么原因？我希望 this.props.transactionDetails 和 this.state.trans_status 在 render 代码块中可用。其他 variables/pages.

的 Redux 存储正常运行

反应页面：

import { get_details } from "../../../appRedux/actions/transAction";

class DonePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showLoader: true,
            transactionDetails: "",
            trans_status: "",
        };
    }

    async componentDidMount() {
        await this.props.get_details('abc1234');
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevProps.transactionDetails !== this.props.transactionDetails) {
            console.log("Inside ComponentDidUpdate");
            // It never arrives here, perhaps suggesting the prop is never created in the store?

            this.setState({
                trans_status: this.props.transactionDetails.trans_status,
            });
        }
    }

    render() {
        console.log(JSON.stringify(this.state.trans_status);
        // returns "" instead of the value of the redux action/reducer
        console.log(JSON.stringify(this.props.transactionDetails);
        // returns undefined instead of the value of the redux action/reducer

        // What am I doing wrong? Why am I not getting the transactionDetails here?
    }
}

const mapStateToProps = (state) => {
    return {
        settings: state.settings,
        // the settings property works fine in this component
        transactionDetails: state.transactionDetails,
    };
};

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators(
        {get_details}, dispatch
    );
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(DonePage));

Redux 操作：

export const get_details = (trans_id) => {
    let token = getAuthToken();
    return (dispatch) => {
        axios
            .get(`${url}/get_details/${trans_id}`, {
                headers: { Authorization: `${token}` },
            })
            .then((res) => {
                if (res.status === 200) {
                    console.log(JSON.stringify(res.data.data);
                    // returns {"trans_status":"paid","trans_due":"0"}
                    return dispatch({
                        type: DETAILS_SUCCESS,
                        payload: res.data.data,
                    });
                } else {
                    return dispatch({
                        type: DETAILS_ERROR,
                        payload: res.data.data,
                    });
                }
            })
    }
}

减速器：

import {
    DETAILS_SUCCESS,
    DETAILS_ERROR,
} from "../constants";

const initial_state = {
    transactionDetails: [],
    transactionDetailsError: "",
};

export default function transactionsReducer(state = initial_state, action) {
    switch (action.type) {
        case DETAILS_SUCCESS:
            console.log(JSON.stringify(action.payload));
            // returns {"trans_status":"paid","trans_due":"0"}
            return { ...state, transactionDetails: action.payload };
        case DETAILS_ERROR:
            return { ...state, transactionDetailsError: action.payload };
        default:
            return state;
    }
};

更新在 reducer 索引文件中 (/reducers/index.js) 我有：

const reducers = combineReducers({
    variousVariables: variablesReducer,
    transactions: transactionsReducer,
});

如果我将其更改为：

，它会起作用

const reducers = combineReducers({
    variousVariables: variablesReducer,
    transactionDetails: transactionsReducer,
});

在页面上，render，this.props.transactionDetails 现在 returns 数据：

{"transData":[],"transactionDetails":{"transaction_status":"paid","transaction_amount_due":"0"},"transactionDetailsError":"","otherData":"", etc.}

所以 transactionDetails 嵌套在另一个 transactionDetails 中，我需要调用 this.props.transactionDetails.transactionDetails 或 this.props.transactionDetails.transData。但是，我希望这是 this.props.transactions.transactionDetails 和 this.props.transactions.transData.

谁能解释一下这是怎么回事？我想我可以随便命名 reducer 索引文件中的键，然后定义 this.props.anythingilike.

的“路径”

为什么我不能只更改 reducer 索引文件中的键来获取我要查找的内容？我想我还需要更改页面上的某些内容以使其成为我想要的方式吗？因为现在如果我将 reducers 索引文件中的键更改为 transactions，那么 this.props.transactions 仍然是 undefined 在页面上，而如果该键是 transactionDetails 那么 this.props.transactionDetails 做 return 正确的数据。

Answer 1

您可以使用 redux 库中的 compose 方法。

import {compose} from "redux";

//your code

export default compose(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
)(App);

Answer 2

get_details() 不是异步函数，所以我相信不需要等待。

此外，您可以先检查您的道具是否在 componentDidupdate 上更新

componentDidUpdate(prevProps, prevState) {
  console.log(this.props.transactionDetails)
  // if transactionDetails updated then you can perform setState
}

Answer 3

我找到了问题的答案。正如一些人所建议的那样，有关存储设置的详细信息很重要，尤其是减速器的设置和 combineReducers.

的使用

我的减速器设置包括：

const reducers = combineReducers({
    ...,
    transactions: transactionsReducer,
});

为了让它工作，我只需要在页面上更改：

1--this.props.transactionDetails 到 this.props.transactions（如果需要，还有 this.props.transactions.transactionDetails。

2--下面代码块的最后一行需要是transactions: state.transactions

 const mapStateToProps = (state) => {
     return {
         settings: state.settings,
         transactionDetails: state.transactionDetails,
     };
 };

为什么这个来自 Redux store 的变量不在 React 页面的 `this.props` 中？

Why is this variable from the Redux store not in the `this.props` on React page?

javascript

reduce

reactjs

redux