javascript - 该函数有多个参数。但是，不要传递所有参数

Question

从选择中，我选择值已完成、未完成或进行中。在 handleStatus 函数中，我调用 getDetail 函数并向其传递值 status = e.target.value。但是，在 console.log (status) 中的 getDetail 函数返回我undefined

此处代码:https://stackblitz.com/edit/react-kk4yv8

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {

  constructor (props) {
    super(props);
    this.state = {
      items: [],
      status: ''
    }
  }

    handleStatus = (e) => {
        this.setState({
                status: e.target.value
        })

        this.getDetail(status = e.target.value)
    }

    getDetail = (query, status) => {
        console.log(status)
    }

  render () {
    return (
      <div>
        <select
            value={this.state.status}
            onChange={(e) => this.handleStatus(e)}
        >
            <option value="completed">completed</option>
            <option value="uncompleted">uncompleted</option>
            <option value="inprogress">inprogress</option>
        </select>   
      </div>
    )
  }
}

render(<App />, document.getElementById('root'));

Answer 1

this.getDetail(status = e.target.value)

javascript 没有命名参数。此代码的意思是“将 e.target.value 分配给变量 status，然后将其作为第一个参数传递。在 getDetail 内部，第一个参数被分配给本地变量query。没有传入第二个参数，所以在getDetail中，第二个参数是未定义的。第二个参数可能在本地被称为status，但这无关函数之外发生的事情。

如果你想传入e.target.value作为状态，你需要把它作为第二个参数:

this.getDetail(undefined, e.target.value);

出于这个原因，通常将可选变量放在参数列表的末尾，这样您就可以简单地省略它们，而不是填充显式的未定义。

如果要传入大量参数，另一种选择是使用单个参数，即一个对象。函数内的代码可以检查该对象上是否存在属性，调用该函数的代码可以随意省略或包含该对象的属性。例如:

const example = (options) {
  if (options.status) {
    // whatever
  }
  if (options.query) {
    // whatever
  }
}

// To be used like:

example({ query: 'foo', status: 'complete' });
example({ status: 'incomplete' });
example({ query: 'bar' });