javascript - 没有在状态中设置属性？

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

你所写的内容会很好地工作。出于以下几个原因，在状态中设置初始值被认为是最佳实践:

1. 组件在初始化时有一个默认值

2. 任何阅读代码的人都知道 state 属性(及其类型)会发生什么

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

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

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