Redux thunk 未更改输入字段的值

Question

我的组件中有一个简单的输入字段，它与 Redux thunk 相连

import React, {Component} from 'react';
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import {enterQuantity} from "../../../../store/products.actions";
class SingleProduct extends Component {

    render(){
        const basketDaysQuantity = this.props.basketDaysQuantity;
        return(
<input id="quantity"  type="number" onChange={e => {enterQuantity(e.target.value); console.log(e.target.value)}} value={basketDaysQuantity} />
        )
    }
}

const mapStateToProps = state => ({
    basketDaysQuantity: state.basket.basketDaysQuantity
})

const mapDispatchToProps = (dispatch)  => {
    return {
        enterQuantity: bindActionCreators(enterQuantity, dispatch)
    }
}

我有 products.actions 文件，其功能是将操作转发到存储

export const enterQuantity = value => dispatch => {
    dispatch({type: ON_QUANTITY_CHANGE, payload: value})
}

和 basket.reducer 存储输入值的地方


const initialState = {
    basketDaysQuantity: 1
};
const basketReducer = (state = initialState, action) => {
    switch(action.type) {

case ON_QUANTITY_CHANGE:
            return {
                ...state,
                basketDaysQuantity: action.payload
            }
        default:
            return state;
    }
};

export default basketReduce

但输入字段的更改没有反映出来，一切都已连接。

有人可以帮忙吗？

Answer 1

看来您没有正确获取 enterQuantity 功能，您必须从道具中获取它，试试这个：

 import React, {Component} from 'react';
    import {connect} from "react-redux";
    import {bindActionCreators} from "redux";
    import {enterQuantity} from "../../../../store/products.actions";
    class SingleProduct extends Component {
    
        render(){
          const {basketDaysQuantity, enterQuantity} = this.props;
            
          return(
            <input 
               id="quantity"  
               type="number" 
               onChange={e => {enterQuantity(e.target.value);            
             console.log(e.target.value)}} value={basketDaysQuantity} />
            )
        }
    }
    
    const mapStateToProps = state => ({
        basketDaysQuantity: state.basket.basketDaysQuantity
    })
    
    const mapDispatchToProps = (dispatch)  => {
        return {
            enterQuantity: bindActionCreators(enterQuantity, dispatch)
        }
    }

Redux thunk 未更改输入字段的值

Value of input field not being changed with Redux thunk

javascript

reactjs

redux-thunk