如何不关闭react/destructuring-assignment规则修复ReactJS的props解构？

你的代码中虽然对props做了剩余解构const { ...rest } = props，但后续仍直接使用props.onChange，这违反了react/destructuring-assignment规则——该规则要求所有用到的props属性必须通过解构获取，不能直接访问props对象的属性。

你可以通过以下两种方式修复：

方式一：在函数内部解构props时提取onChange #

const AutocompleteField = (props) => {
  // 明确解构出需要用到的onChange，同时保留剩余属性rest
  const { onChange, ...rest } = props
  const { control, handleSubmit, errors, setError } = useFormContext()

  return (
    <Root>
      <Autocomplete
        multiple
        limitTags={1}
        options={CATEGORIES}
        getOptionLabel={(option) => (typeof option === 'string' ? option : option.title)}
        // 使用解构后的onChange变量
        onChange={(event, value) => onChange(value)}
        // 若需传递其他props给Autocomplete，可展开rest
        {...rest}
<snip>

方式二：直接在组件参数中解构props #

// 直接在组件接收参数时解构出onChange和剩余属性rest
const AutocompleteField = ({ onChange, ...rest }) => {
  const { control, handleSubmit, errors, setError } = useFormContext()

  return (
    <Root>
      <Autocomplete
        multiple
        limitTags={1}
        options={CATEGORIES}
        getOptionLabel={(option) => (typeof option === 'string' ? option : option.title)}
        onChange={(event, value) => onChange(value)}
        {...rest}
<snip>

这两种方式都满足规则要求，所有用到的props属性均通过解构获取，无需关闭react/destructuring-assignment规则。

内容的提问来源于stack exchange，提问作者khteh