如何使用用戶信息渲染表單（React + Redux）

Question

我已經設法使用axios請求獲取用戶信息。我也設法使用我創建的組件來呈現用戶信息。我的問題是，我不能將它顯示在另一個我創建的稱爲ProfileForm的組件上。 ProfileForm用作更新用戶信息的表單。我想用用戶信息設置約束器的狀態。

而且，當我改變值this.props.user.username等。我接收兩個錯誤：

警告：無法丙類型：該道具value如 TextFieldGroup需要被標記，但它的值是undefined。 在TextFieldGroup（在ProfileForm.js：112） 在ProfileForm（在ProfilePage.js：23）

，第二個是

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; 

這裏是我的ProfilePage

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> 
     ); 
     } 
    } 

和我的用戶配置其工作

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

在用戶配置，您使用的是道具作爲參數傳遞一個無狀態的組件。在函數params中，您將用戶解構爲自己的常量。這很酷，運作良好。

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