Question

新年快乐......

我对RN非常陌生，我正在构建一个小应用程序来感受它。

我想弄清楚是否有办法清理这部分。

下面我在state和constructor中有一个嵌套多维对象reset function。

我有四个input字段和一个普通text区域，我根据结果动态更新。

现在虽然这样做但感觉不太干净，比如说我想添加另一个嵌套多维对象state，它在reset上设置不同的默认值我要去必须添加另一个if block来处理它，以便它进一步加剧问题。

有任何想法如何改善这一点，或者我采取了错误的方式：/

constructor(props) {
  super(props)

  this.state = {
    input1: '',
    input2: '',
    input3: '',
    input4: '',
    result: {
      'ratio': 0,
      'style': '',
    },
  }
}

reset() {
  let newState = {};

  for (const field of Object.keys(this.state)) {
    if (field == 'result') {
      this.setState({
        result: {
          ratio: 0,
          style: '',
        }
      });

      continue;
    }

    newState[field] = '';
  }

  this.setState(newState);
}

**编辑**

为了更清楚，如果我向状态添加另一个多维对象，我需要包含另一个if statement

for (const field of Object.keys(this.state)) {
  if (field == 'reset') {
    // ...
  }

  if (field == 'extra') {
    // ...
  }

  newState[field] = '';
}

理想情况下，我需要的是this.state的副本，然后才更新，然后只需恢复具有默认参数的副本this.setState(copy)

非常感谢。

Answer 1

我不完全确定你的意思是嵌套＆＃39;，但这里有几点建议：

reset() {
  let newState = {};

  for (const field of Object.keys(this.state)) {
    if (field == 'result') {
      newState.result = {
          ratio: 0,
          style: '',
      };
    }else{
        newState[field] = '';
    }
  }

  this.setState(newState);
}

以这种方式循环，您可以避免触发多次渲染，因为您只需调用setState一次。

编辑：如果您想避免检查具有已知名称的字段，您可以直接访问这些字段。＆＃39;环绕＆＃39;您在状态中的新条目中的所有输入，并循环通过该条目：

constructor(props) {
  super(props)

  this.state = {
    inputs:{
        input1: '',
        input2: '',
        input3: '',
        input4: '',
    }, 
    result: {
      'ratio': 0,
      'style': '',
    },
    extra = {
        extraKey: 1,
    }
  }
}

reset() {
  let newState = {};
  newState.result = {ratio: 0, style: ''};
  newState.extra = // ...
  newState.inputs = {};

  for (const field of Object.keys(this.state.inputs)) {
    newState.inputs[field] = '';
  }

  this.setState(newState);
}

使用循环来更新对象中的键有点麻烦，但是当事先不知道键名时，我想不出更简单的解决方案。

构造函数中的多维对象状态

1 个答案: