将道具转移到状态的正确方法（如果需要）React＆Redux

Question

我创建了一个Create-React-App react app和Redux。

我正在使用连接将我的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 }
}

这是从道具获得初始值的推荐方法吗？

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

Answer 2

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

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

当道具（或状态被更新）时，值字段将且将始终被更新。

value={this.props.fieldName}

要么

value={this.state.fieldName}

您的onChange函数可以调用setState（{fieldName：value}）来设置本地状态，也可以分派到redux来更新Store，这将通过mapStateToProps函数来更新本地状态。

Answer 3

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

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

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