javascript - 不更新内部状态的以下方法的另一种替代方法

Question

我有一个用例，有一个表单应该被控制，并且应该预先填充其字段，以便用户可以编辑表单。为此我所做的是

const mapStateToProps = createStructuredSelector({
  myInfo: makeSelectMyInfo(),
  errorResponse: makeSelectMyInfoErrorResponse()
});

const mapDispatchToPropes = dispatch => ({
  loadMyInfo: () => dispatch(getMyInfo()),
  updateMyInfo: (myInfo, token) => dispatch(updateMyInfo(myInfo, token))
});

class ConfirmPropertyByUser extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      user_info: {
        contact_fname: "",
        contact_lname: "",
        agree_terms_condition: false,
      }
    };
  }
  componentDidMount() {
    this.props.loadMyInfo();
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.myInfo !== this.props.myInfo) {
      console.log("object", Object.values(nextProps.myInfo));
      this.setState(state => ({
        user_info: {
          ...state.user_info,
          contact_fname: nextProps.myInfo.contact_fname,
          contact_lname: nextProps.myInfo.contact_lname,
        }
      }));
    }
  }

  handleChange = e => {
    this.setState({
      user_info: { ...this.state.user_info, [e.target.name]: e.target.value }
    });
  };

  handleUserTerms = e =>
    this.setState({
      user_info: {
        ...this.state.user_info,
        agree_terms_condition: e.target.checked
      }
    });

  handleSubmit = e => {
    e.preventDefault();
    this.props.updateMyInfo(this.state.user_info, this.props.match.params.id);
  };

  render() {
    const { errorResponse } = this.props;
    const { user_info } = this.state;
    let message;
    if (errorResponse && typeof errorResponse === "string") {
      message = <Notification message={errorResponse} timeout={5000} />;
    }
    return (
      <div className="container">
        {message && message}
        <div className="card card-lg">
          <h1>Register</h1>
          <form onSubmit={this.handleSubmit}>
              <div className="form-group">
                <label>First Name</label>
                <input
                  type="text"
                  name="contact_fname"
                  className="form-control"
                  value={user_info && user_info.contact_fname}
                  onChange={this.handleChange}
                />
              </div>
              <div className="form-group">
                <label>Last Name</label>
                <input
                  type="text"
                  name="contact_lname"
                  className="form-control"
                  value={user_info && user_info.contact_lname}
                  onChange={this.handleChange}
                />
              </div>
              <div className="form-group">
                  <input
                    className="custom-control-input"
                    type="checkbox"
                    onChange={this.handleUserTerms}
                  />
              </div>
              <button
                className="btn btn-default btn-block btn-lg"
                disabled={
                  !user_info.password || !user_info.agree_terms_condition
                }
              >
                Submit Details
              </button>
            </fieldset>
          </form>
        </div>
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToPropes)(
  ConfirmPropertyByUser
);

我正在使用 redux 并更新内部状态。但我在某处听说，使用 redux 时不需要更新内部状态。如何在不更新内部状态的情况下解决以下问题？有人可以帮我解决这个问题吗？

Answer 1

你正在做的事情看起来没问题。根据 Redux 常见问题解答，there's nothing wrong with using component state in a Redux app 。对于表单，通常需要同时拥有“原始”值集和“正在进行的”复制值集，并且“WIP”值是否存储在 Redux 中或存储在 react 组件。

无论如何，我确实在我的博文 Practical Redux, Part 8: Form Draft Data Management 中展示了一些将“WIP”表单状态放入 Redux 的示例。 ，这可能是一个有用的引用。但是，总的来说，您这里的代码看起来不错 - 您正确地将 Prop 复制到 componentWillReceiveProps 的构造函数 和 中的状态，并且您遵循的概念方法非常好.

一个小的风格建议:我通常建议人们对 mapDispatch 参数使用对象简写语法。在你的情况下，它看起来像:

const actions = {loadMyInfo : getMyInfo, updateMyInfo : updateMyInfo};

// later
export default connect(mapState, actions)(ConfirmPropertyByUser);