如何使用用戶信息呈現表單（React + Redux）

Question

我已經設法使用axios請求獲取用戶信息。 我還設法使用自己創建的組件在視圖上呈現用戶信息。 我的問題是我無法在我創建的另一個名為ProfileForm的組件上顯示它。 ProfileForm用作更新用戶信息的表單。 我想用用戶信息在承包商上設置狀態。

另外，當我將值更改為this.props.user.username等時，我收到兩個錯誤：

警告：prop類型失敗：prop value在TextFieldGroup標記為必需，但其值是undefined 。 在ProfileForm（在ProfilePage.js：23）的TextFieldGroup中（在ProfileForm.js：112）

第二個是

warning.js：36警告：TextFieldGroup正在更改要控制的文本類型的不受控制的輸入。 輸入元素不應從不受控制切換為受控制（反之亦然）。 確定在組件的使用壽命期間使用受控或不受控制的輸入元素。

class ProfileForm extends React.Component
  constructor(props) {
      super(props);
      this.state = {
        username: '',
        email: '',
        password: '',
        passwordConfirmation: '',
        errors: {},
        isLoading: false,
        invalid: false
      };

      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
      this.setState({ [event.target.name]: event.target.value });
    }

    render() {
      const { errors } = this.state;
      return (
        <form onSubmit={this.handleSubmit}>

          <TextFieldGroup
            error={errors.username}
            placeholder="Username"
            onChange={this.handleChange}
            value={user.username} <-- Here should be the bind
            field="username"
          />
          <TextFieldGroup
            error={errors.email}
            placeholder="Email"
            onChange={this.handleChange}
            checkUserExists={this.checkUserExists}
            value={user.email} <-- Here should be the bind
            field="email"
          />
          <TextFieldGroup
            error={errors.password}
            placeholder="Password"
            onChange={this.handleChange}
            value={user.password} <-- Here should be the bind
            field="password"
          />
          <div className="form-group">
                <button disabled={this.state.isLoading || this.state.invalid} className="btn btn-primary btn-md btn-block">Update</button>
          </div>
        </form>
    );
  }
}

export default ProfileForm;

這是我的個人資料頁

class ProfilePage extends React.Component { 
        componentDidMount() {
          this.props.getUser();
        }

        render() {
          const { profileUpdateRequest, addFlashMessage, getUser, isUserExists } = this.props;
          return (
            <div className="row">
                  <div className="row text-center">
                    <UserProfile user={this.props.user} /> <-- This works!!!!
                  </div>
                  <ProfileForm
                      profileUpdateRequest={profileUpdateRequest}
                      addFlashMessage={addFlashMessage}
                      getUser={getUser}
                      user={this.props.user} <--- This doesnt work!!!!
                      isUserExists={isUserExists}
                   />                      
            </div>
        );
      }
    }

和我的UserProfile起作用

export default function UserProfile({ user }) {

  const userProfile = (
    <div className="row">
      {user.username} {user.email}
    </div>
  );

  return (
    <div>
      {userProfile}
    </div>
  );
}

我的ProfileUpdateAction操作

export function getUser() {
  return dispatch => {
    return axios.get('/api/user')
    .then(res => res.data)
    .then(data => dispatch(setUser(data.user)));
  }
}

還有我的減速器

import { SET_USER } from '../actions/profileUpdateActions';

export default function user(state = [], action = {}) {
  switch(action.type) { 
    case SET_USER:
      return action.user;
    default: return state;
  }
}

我的textFieldGroup

const TextFieldGroup = ({ field, value, label, error, type, onChange, placeholder, min, checkUserExists, disabled }) => {
      return (
        <div className={classnames("form-group", {'has-error': error})}>
              <label className="control-label">{label}</label>
              <input
                type={type}
                name={field}
                className="form-control"
                value={value}
                min={min}
                onChange={onChange}
                onBlur={checkUserExists}
                placeholder={placeholder}
                disabled={disabled}
              />
              {error && <span className="help-block">{error}</span>}
        </div>
      );
    }

    TextFieldGroup.propTypes = {
      field: React.PropTypes.string.isRequired,
      value: React.PropTypes.string.isRequired,
      label: React.PropTypes.string,
      error: React.PropTypes.string,
      min: React.PropTypes.string,
      disabled: React.PropTypes.bool,
      placeholder: React.PropTypes.string.isRequired,
      type: React.PropTypes.string.isRequired,
      onChange: React.PropTypes.func.isRequired,
      checkUserExists: React.PropTypes.func
    }
    TextFieldGroup.defaultProps = {
      type: 'text'
    }
    export default TextFieldGroup;

Answer 1

在UserProfile中，您使用的是在props中作為參數傳遞的無狀態組件。 在函數參數中，將用戶分解為自己的常量。 那很酷，效果很好。

但是，在UserForm中，您有一個基於類的組件。 props對象附加到對象的上下文（this）。 因此，要訪問它，您需要使用this.props.user 。