React父子组件传值报错：setSearch不是函数，求问题排查

我在React项目中尝试将父组件App的状态值传递给子组件SearchBar，实现子组件输入框的值同步到父组件状态，但输入时触发报错。

父组件App代码：

// not related code ...

// search
const { search, setSearch } = useState("");

const handleSearch = (e) => {
  setSearch(e.target.value);
};

// not related code ...

return (
  <ContextProviders
    // not related code ...
  >
    <div className="App">
      <Navbar />
      <SearchBar search={search} handleSearch={(e) => handleSearch(e)} />
      <Outlet />
    </div>
  </ContextProviders>
);
}

子组件SearchBar代码：

import { useState } from "react";

export default function SearchBar(props) {
  // not related code ...

  console.log(props);

  return (
    <>
      <div>
        <input
          type="search"
          value={props.search}
          onChange={props.handleSearch}
          // not related code ...
        />
      </div>
    </>
  );
}

报错信息：

Uncaught TypeError: setSearch is not a function at handleSearch

问题根源 #

你在父组件中对useState的解构方式错误：useState返回的是数组，而非对象，所以不能用对象解构const { search, setSearch } = useState("")，这样会导致search和setSearch都为undefined，调用setSearch自然会触发"不是函数"的错误。

修复方案 #

将父组件中的状态声明改为数组解构：

// 修正后的状态声明
const [search, setSearch] = useState("");

额外优化 #

传递handleSearch时不需要额外包裹箭头函数，直接传递函数引用即可，React会自动将事件对象作为参数传入：

<SearchBar search={search} handleSearch={handleSearch} />

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