React传递setter函数报错：accountNumberFunction is not a function

1. 子组件接收Props方式错误 #

React组件的参数是props对象，而非单个属性。你直接把accountNumberFunction当作组件参数，实际上它是props对象中的一个属性，正确的接收方式如下：

// 方式1：解构props
const Account = ({ accountNumberFunction }) => {
  // 原有代码逻辑不变
};

// 方式2：通过props对象访问
const Account = (props) => {
  // 使用时需写成 props.accountNumberFunction(...)
};

2. 父组件的两处问题 #

2.1 未导入useState钩子 #

useState是React内置钩子，必须从react中导入才能使用：

import React, { useState } from "react";

2.2 传递的函数未接收参数 #

你传递的() => setAccountNumberFilter(accountNumber)中，accountNumber未定义，需要接收子组件传递的参数，可简化写法：

<Account accountNumberFunction={setAccountNumberFilter}/>

因为setAccountNumberFilter本身就是接收参数的状态更新函数，直接传递即可。

修复后的完整代码 #

父组件（App.js） #

import Header from "./Header";
import Account from "./Account";
import ActivityPanel from "./ActivityPanel"; // 补充导入ActivityPanel（若组件存在）
import { createRoot } from "react-dom/client";
import React, { useState } from "react";

const App = () => {
  const [accountNumberFilter, setAccountNumberFilter] = useState(0)
    return (
    <React.StrictMode>
        <div>
            <Header />
            <Account accountNumberFunction={setAccountNumberFilter}/>
            <ActivityPanel accountNumberFilter={accountNumberFilter}/>
        </div>
    </React.StrictMode>
    );
};
const root = createRoot(document.getElementById("app"));
root.render(<App />);
export default App;

子组件（Account.js） #

import React, { useEffect, useState } from "react";

const Account = ({ accountNumberFunction }) => {
  const [accounts, setAccounts] = useState([]);

  useEffect(() => {
    fetch("http://localhost:8000/api/account/get_all")
      .then((res) => res.json())
      .then((data) => setAccounts(data.accounts));
  }, []);

  return (
    <div
      className="accountContainer"
      style={{
        width: "100%",
        display: "flex",
        justifyContent: "space-around",
      }}
    >
      {accounts.map((accountObj, indx) => (
        <div
          style={{
            width: "300px",
            backgroundColor: "white",
            display: "flex",
            justifyContent: "center",
            boxShadow: "inset 0 3px 6px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.45)",
            borderRadius: "10px",
          }}
          key={`${accountObj.fields.accountNumber}-${indx}`}
        >
          <div>
            <h2>
              <button onClick={() => accountNumberFunction(accountObj.fields.accountNumber)}>
                <span>{accountObj.fields.type}</span>
              </button>
            </h2>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Account;

额外提示：子组件中使用<a>标签会触发页面跳转，若无需跳转功能，改用<span>更合适。

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