我有以下代码,从React docs逐字记录:

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: 'coconut' };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    const { options } = event.target;
    console.log(options)
    this.setState({ value: event.target.value });
  }

  handleSubmit(event) {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite La Croix flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
          <input type="submit" value="Submit" />
        </label>
      </form>
    );
  }
}


就这样,如果我尝试console.log(options),则会收到错误消息:

Error: Converting circular structure to JSON

但是,向上移动<label>标记(所以我们可以这样做):

<label>Pick your favorite La Croix flavor:</label>


允许console.log()正常工作。

为什么移动标签会产生这种影响?

工作示例here

最佳答案

似乎这是StackBlitz的问题,因为相同的代码可以在CodeSandbox和JSFiddle上正常工作。

10-05 20:18
查看更多