将 Props 传输到 State 的正确方法（如果需要） React 和 Redux答案

【问题标题】：Correct Way to Transfer Props to State (if needed) React & Redux将 Props 传输到 State 的正确方法（如果需要） React 和 Redux
【发布时间】：2018-02-21 14:34:48
【问题描述】：

我创建了一个 Create-React-App 反应应用和 Redux。

我正在使用 connect 将我的 userReducer 映射到状态（通过 mapStateToPrope），即：

function mapStateToProps({ userProfile }) {
return { userProfile: userProfile ? userProfile : null };
}

export default connect(mapStateToProps, fetchUserProfile)(Profile);

我有一个输入，我已将 UserProfile Firstname 绑定到：

render(){
   return (
    <div>
       <input type="text" value={this.props.userProfile.firstName} />
   </div>
 ) 
}

这个问题现在是我把它绑定到了道具上，我无法改变它，如果我输入输入它不会改变输入中的文本..

如果我添加一个 onChange={updateValue} 方法，并尝试更新道具，它将无法工作，因为组件无法更新自己的道具。

这样就剩下将道具转移到状态了。

constructor(props){
    super(props);
    this.state = { FirstName : this.props.userProfile.firstName }
}

这是从 props 中获取初始值的推荐方法吗？

【问题讨论】：

如果你已经在使用 redux，为什么不使用 store (redux)？

标签： reactjs react-redux

【解决方案1】：

您正在尝试使用受控输入而不提供有关更新状态的信息。

如果您只想提供初始状态，可以使用输入字段的defaultValue 属性。

<input defaultValue={this.props.value} />

有了这个，您可以轻松更改输入值，而无需编写开销。

然而，如果你想更新你的组件，你应该使用组件状态（就像你在 onChange 示例中所做的那样）或者你使用 redux 状态，如果你想为比输入组件更多的组件提供输入值.

const Component = ({ firstname, updateFirstname }) => (
  <input
    onChange={updateFirstname}
    value={firstname}
  />
);

const mapStateToProps = state => ({
  firstname: state.profile.firstname,
});

const mapDispatchToProps = dispatch => ({
  updateFirstname: e => dispatch({ type: 'UPDATE_FIRSTNAME', firstname: e.target.value }),
});

connect(mapStateToProps, mapDispatchToProps)(Component);

【讨论】：

这会起作用..我只需要设置初始值，允许用户更改值，然后如果他们点击保存它需要将整个用户配置文件拍摄到通过 AJAX 更新的操作...因此，由于此方法未绑定，因此我需要以某种方式在保存单击时获取新值...
好的，如果您只想在表单提交时发布状态，您可以在表单中编写一个 onSubmit 处理程序，发布 FormData 对象。但也许我会采用组件状态路径，因为您不必处理 FormData 并且可以直接将状态用作 AJAX 请求的 JSON。 :)

【解决方案2】：

为了在本地状态或 redux 中管理更改，您需要按如下方式调用函数 onChange

onChange={(e) => this.updateField('fieldName',e.target.value,e)}

当 props（或 state 更新）时，value 字段将永远更新

value={this.props.fieldName}

或

value={this.state.fieldName}

你的 onChange 函数要么调用 setState({fieldName: value}) 来设置本地状态，要么调度到 redux 来更新 Store，然后再通过你的 mapStateToProps 函数更新本地状态。

【讨论】：

【解决方案3】：

对受控组件执行此操作并没有错。但是您犯的一个错误是构造函数中没有this.props。您正在使用 props 变量将道具直接传递给构造函数。所以代码将是

this.state = {
  FirstName: props.userProfile.firstName
};

但是，如果您希望稍后在组件上更新来自 store 的值，请声明 componentWillReceiveProps() 并在那里设置状态值，以便在此处捕获 store 中的更改。

【讨论】：