当密钥未知时，如何重置状态？ （即动态表格）

Question

我正在使用es6语法setState({[name]: value})来跟踪表单中动态添加的输入，一切正常。我想知道在表单提交后清除状态。我会提交我的解决方案，但我有兴趣听取关于更好地清除状态的方法的意见，或者可能管理一般的动态状态。

根据@ DavidL.Walsh（参见下面的链接），在初始状态下向状态添加字段是错误的。但是你不知道输入数量或名称的动态形式呢？ https://stackoverflow.com/a/34845925/4634544

Answer 1

这就是我目前正在使用的内容。我跟踪的所有项目都是字符串，这很不错。

Object.keys(this.state).forEach(key => {
    this.setState({[key]: ''})
})

Answer 2

fyi，@ Rick Jolly的想法是嵌套表单状态。所以初始状态是： state = { form: {} }

更新状态如下： this.setState(prevState => ({ form: { ...prevState.form, [name]: value } }))

重置状态如下： this.setState({ form: {} })

谢谢里克！

Answer 3

通常，当您在React组件中定义状态时，您将在mount / construct上定义所有键及其初始值。您可以将此数据封装到用于重置的常量

使用登录表单作为示例

const LOGIN_INITIAL_STATE = { username: '', password: '', rememberEmail: false } 

// in the class
this.state = {...LOGIN_INITIAL_STATE}

// to reset
this.setState({...LOGIN_INITIAL_STATE})

如果您不知道表单的字段，在获得这些字段之前，我不会呈现表单。将它们作为初始状态属性传递..然后在构造函数中，您可以使用初始状态属性定义状态。这样你就可以在构造上定义状态，而不是在定义状态之后添加字段（David Walsh推荐这是因为它是一种不好的做法）

动态表单示例

someRequestToGetFormFields().then(fields => dispatch({type: FIELDS_ADDED, fields})
// in a reducer you store these fields and update the state of the reducer.

// in a class that renders the form
{ this.props.formFields
  ? <SomeDynamicForm initialState={this.props.formFields} />
  : null 
}

// your form class
class SomeDynamicForm extends Component {
    constructor(props) {
        this.state = {...props.initialState}
    }
    resetState = () => {
        this.setState({...this.props.initialState})
    }
    ...
}

现在这是一个快速而非详尽的解决方案..你应该能够从这里找出其余部分。