Question

以下超级简单代码未按预期工作。

我正在使用react并通过redux store注入/提供道具。我的理解是在React组件中存储注入道具。

为了使这个组件工作，为什么我需要line1和line 2？

import React from 'react';
import './sytles.css';
import { fetchUsers } from "./actions/userAction"
import { connect } from "react-redux"

@connect((store) => {
    return {
        signup: store.users,
    };
  })
class Signup extends React.Component {

    handleClick(event) {
       this.setState({email: event.target.value}) //line 1
       this.props.signup.email = event.target.value; // line 2
    }
    render() {
        return (
                <input
                    type="text"
                    name="email"
                    value={this.props.signup.email}
                    onChange=
                    { (event) => this.handleClick(event) }/>
        );
    }

}
export default Signup;

Answer 1

你做错了，道具绝不能直接变异，你也不应该保持一个可以直接从道具中衍生出来的状态。由于您的数据signup存在于商店中，因此您需要一个在商店中更新此值的操作创建者

const handleSignup = (email) => {
   return {
       type: "SIGNUP_EMAIL",
       email
   }
}

并像

一样发送

handleClick(event) {
   dispatch(handleSignup(event.target.value));
}

Answer 2

你不能重新分配道具 - 除了Redux之外它只读。但是要更改Redux商店，您需要发送一个操作。根据{{3}}的Redux文档：

状态为只读

更改状态的唯一方法是发出一个The Three Principles of Redux，一个描述发生的事情的对象。

这可确保视图和网络回调都不会直接写入状态。相反，他们表达了改变国家的意图。因为所有的变化都是集中的，并且按照严格的顺序逐个发生，所以没有细微的竞争条件需要注意。由于操作只是普通对象，因此可以对它们进行记录，序列化，存储以及稍后重放以进行调试或测试。

React Redux存储状态更改无效

2 个答案:

状态为只读

更改状态的唯一方法是发出一个The Three Principles of Redux，一个描述发生的事情的对象。