Question

我的应用程序有一个用户控制面板，当页面加载时，它使用Redux从服务器获取数据。

在构造中，组件会创建一个初始状态，例如：

const { profile } = this.props;
this.state = {
  prop1: profile.prop1 || '',
  prop2: profile.prop2 || '',
  nested: {
    nestedProp1: profile.nested.nestedProp1 || '',
  }
  ...etc...
}

在componentWillMount上，我有这个：

componentWillMount() {
  const { user, getProfile } = this.props;

  if (user.profile_id) {
    getProfile(user.profile_id);
  }
}

我不明白的是两件事：

方法正确吗？我正在使用状态来处理表单输入。
获取时如何更新状态？此配置文件对象中有很多属性，我想以一种非常简单的方式更新所有状态，而不是一个一个地更新它。

Answer 1

只要Redux商店更新，您就可以使用static getDerivedStateFromProps(props, state)-方法从props更新组件状态。它有两个参数props和state。

class App extends React.Component {
  // https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops
  static getDerivedStateFromProps(props, state){
    // Compare and update state only if props differs from state
    if(JSON.stringify(state) !== JSON.stringify(props.profile)){
      return { ...props.profile }
    }
    // If it doesn't differ do not update state
    return null
  }

  // Do an state initialization
  state = { ...this.props.profile }

  // Prefer componentDidMount -for doing fetch and updating component state
  componentDidMount(){
    const { user, getProfile } = this.props;

    if (user.profile_id) {
      getProfile(user.profile_id);
    }
  }

  render(){
    return (
      <div className="App">
         {/** Render content */}
      </div>
    );
  }
}

Rest Spread运算符，用于填充状态的是ES6语法。

如果使用Babel，则可能需要将rest spread operator -plugin添加到.babelrc -config中。 https://babeljs.io/docs/en/babel-plugin-proposal-object-rest-spread

Answer 2

1。如果您使用的是redux，我认为不需要使用状态来管理日期，而是可以使用props（redux）处理项目中的所有日期。然后，如果要更新日期，则应创建操作以更新存储在redux中的全局唯一日期。

2。关于如何处理输入，当用户拥有输入值时，您可以创建一个动作，创建一个具有初始状态的副本，然后使用您的输入动作来更新状态。

function updateInput(state = initialState, action) {
  switch (action.type) {
  case 'INPUT':
    return Object.assign({}, state, {
    profile_id: action.profile
  })
    return state;
  }
}

如何设置状态整个对象？

2 个答案: