Question

在我所见过的所有教程中，状态属性都设置为空字符串，数组等。因此，我认为这是最佳实践。

那么通过事件处理程序设置状态属性是一种坏习惯吗？

class Form extends Component {
  state = { };

  handleOptionChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    return (
      <div>
        <form>
          <label>
            <input
              type="radio"
              name="size"
              value="small"
              checked={this.state.size === "small"}
              onChange={this.handleOptionChange}
            />
            Small
          </label>
          <label>
            <input
              type="radio"
              name="size"
              value="large"
              checked={this.state.size === "large"}
              onChange={this.handleOptionChange}
            />
            Large
          </label>
        </form>
      </div>
    );
  }
}

export default Form;

代码工作得很好，并且每次选择输入时都会更新状态。

Answer 1

您所写的内容会正常工作。出于以下原因，设置状态的初始值被认为是最佳做法：

该组件在初始化时具有默认值

任何阅读代码的人都知道state属性（及其类型）的期望

class Form extends Component {
  state = {
    size: 'small'
  }
  ...
}

默认情况下，这会将this.state.size设置为'small'。如果您不希望使用默认值，则最好设置一个与state属性具有相同类型的空值。

换句话说，如果您期望this.state.size是一个字符串，但是您不希望它具有默认值，则state = { size: '' }会发送消息“此状态具有{{ 1}}属性，我们可以期望它是一个字符串'

没有在状态中设置属性？

1 个答案: