Question

以下是简单的反应代码，其中包含两个下拉菜单，分别用于选择report type和date type。在选择每个下拉列表时，我尝试使用扩展运算符更新metricsDropDown : reporType中相应的单个属性（dateDropDown:dateType，state）。但是，reportType在undefined中被更新为state。

代码如下：

class MetricsReport extends Component {
    constructor(props) {
      super(props)
      this.state = {
        metricsParams: {reportType: "", dateType: ""}
      }
      this.getReportType = this.getReportType.bind(this);
      this.getMetricsDateType = this.getMetricsDateType.bind(this);

    }
    getReportType(event) {
      console.log(this.state.metricsParams);
      const {value} = event.target.value;
      this.setState(prevState => ({
        metricsParams: {
            ...prevState.metricsParams,
            reportType: value
        }
      }))

    }
    getMetricsDateType(event) {
      console.log('metricsparams:reportType', this.state.metricsParams.reportType); // reportType is undefined here
      const {value} = event.target.value;
      this.setState(prevState => ({
        metricsParams: {
            ...prevState.metricsParams,
            dateType: value
        }
      }))
    }
    componentDidMount() {

    }

    render() {
      return (
          <div >
              <select id="metricsDropDown" className="browser-default" onChange={this.getReportType}>
                <option value="MetricsByContent">Metrics By Content</option>
                <option value="MetricsByUser">Metrics By User</option>
              </select>
              <select id="dateDropDown" className="browser-default" onChange={this.getMetricsDateType}>
                <option value="Publish Date">Publish Date</option>
                <option value="Expiry Date">Expiry Date</option>
                <option value="Read Date">Read Date</option>
              </select>
          </div>
      )
    }

}

export default MetricsReport;

Answer 1

解构语法错误。它期望value属性是具有另一个value属性的对象。

应该是：

const {value} = event.target;

无法在this.setState（）中使用传播运算符更新json属性-React.js

1 个答案: