Question

您能帮我吗？我需要有一个输入来从redux状态的属性“ cantidad”中读取其值，因此，当“ cantidad”属性发生更改时，输入值也发生了变化，即实现了redux状态下“ candidad”的更改，但是没有在组件本身上。这应该很简单，但我无法完成ID。

我的状态：

carrito: {
    articulosEnCarrito: [
      {
        id: '3937',
        cantidad: 15
      }
    ],
    total: 0
  },

我的组件

const ControlDeCantidades = props => {

const handleAumentarCantidad = id => {
   props.agregarACarrito(id);
};

const articulo = props.articulosEnCarrito.find(
  articulo => articulo.id === props.idDeArticulo
);

return (
<div>
   <button type="button" onClick={e => {
    e.preventDefault();
    handleReducirCantidad(props.idDeArticulo);
   }}
   >
   <input type="number" defaultValue={articulo.cantidad} />
</div>
 );
};

const mapStateToProps = state => {
  return {
    articulosEnCarrito: state.carrito.articulosEnCarrito
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ControlDeCantidades);

我希望当redux状态上的“ cantidad”值发生变化时，输入值也会发生变化

Answer 1

以下是完整controlled input的示例。

const Input = () =>{
    const [value, setValue] = useState('')
    return(
        <input value={value} onChange={e => setValue(e.target.value)} />
    )
}

仅将值传递给输入而无法更新它会使输入处于受控和不受控制状态，则应提供一个回调以将值更新为该值。使用类：

class Input extends React.Component{
    state ={ value: ''}
    onChangeHandler = e => this.setState({value: e.target.value})

    render(){
        return(
            <input value={this.state.value} onChange={this.onChangeHandler} />
        )
    }
}

Answer 2

查看减速器可能会有所帮助。我也不确定您是否正在使用它，但尚未定义mapDispatchToProps（）

当React + Redux上的状态改变时，输入值没有改变

2 个答案: