传递setState作为React组件Props报错‘不是函数’？实践建议与替代方案

一、"setValues不是函数"错误修复 #

你的代码存在语法错误，导致React无法正确解析组件，进而引发该错误：
Form组件中每个<input>的onChange回调箭头函数缺少闭合括号。以第一个输入框为例，原代码：

<input type="text" value={values.name} onChange={(event) => setValues((prev) => ({ ...prev, name: event.target.value }))/>

需要在setValues(...)后补充一个闭合括号，修正后：

<input 
  type="text" 
  value={values.name} 
  onChange={(event) => setValues((prev) => ({ ...prev, name: event.target.value }))}
/>

所有输入框都需要做同样的修正，确保语法正确。

二、直接传递setState作为Props是否是最佳实践？ #

直接传递setState类函数（比如setValues）作为Props可行但并非绝对最佳实践，分场景判断：

• 优势：在小型项目或简单组件树中，写法简洁直接，无需额外封装逻辑。
• 劣势：会提升子组件与父组件的耦合度，子组件依赖父组件的状态更新实现，不利于子组件复用；若组件层级较深，还会出现"Props drilling"（逐层传递Props）的繁琐问题。

三、替代方案 #

1. 封装专属回调函数 #

父组件不直接传递setValues，而是封装好针对每个字段的更新回调，子组件只需调用这些回调，无需关心父组件的状态更新逻辑：
父组件App：

import "./styles.css";
import { useState } from "react";
import Form from "./form"

export default function App() {
  const [values, setValues] = useState({
    name: "",
    phone: "",
    pincode: "",
    address: "",
    city: "",
    state: "",
    landmark: "",
    defaultAdd: false
  });

  const handleNameChange = (newName) => {
    setValues(prev => ({ ...prev, name: newName }));
  };

  const handlePhoneChange = (newPhone) => {
    setValues(prev => ({ ...prev, phone: newPhone }));
  };

  const handlePincodeChange = (newPincode) => {
    setValues(prev => ({ ...prev, pincode: newPincode }));
  };

  return (
    <div className="App">
      <Form 
        values={values} 
        onNameChange={handleNameChange}
        onPhoneChange={handlePhoneChange}
        onPincodeChange={handlePincodeChange}
      />
    </div>
  );
}

子组件Form：

import "./styles.css";

export default function Form({values, onNameChange, onPhoneChange, onPincodeChange}) {
  return (
    <div className="App">
      <input 
        type="text" 
        value={values.name} 
        onChange={(e) => onNameChange(e.target.value)}
      />
      <input 
        type="text" 
        value={values.phone} 
        onChange={(e) => onPhoneChange(e.target.value)}
      />
      <input 
        type="text" 
        value={values.pincode} 
        onChange={(e) => onPincodeChange(e.target.value)}
      />
    </div>
  );
}

这种方式降低了组件耦合度，子组件可独立复用。

2. 使用React Context API #

如果组件层级较深，不想逐层传递Props，可以用Context封装状态和更新逻辑，子组件直接从Context中获取：
创建FormContext.js：

import { createContext, useContext, useState } from 'react';

const FormContext = createContext();

export function FormProvider({ children }) {
  const [values, setValues] = useState({
    name: "",
    phone: "",
    pincode: "",
    address: "",
    city: "",
    state: "",
    landmark: "",
    defaultAdd: false
  });

  const updateField = (fieldKey, fieldValue) => {
    setValues(prev => ({ ...prev, [fieldKey]: fieldValue }));
  };

  return (
    <FormContext.Provider value={{ values, updateField }}>
      {children}
    </FormContext.Provider>
  );
}

export function useForm() {
  return useContext(FormContext);
}

父组件App：

import "./styles.css";
import { FormProvider } from './FormContext';
import Form from "./form"

export default function App() {
  return (
    <FormProvider>
      <div className="App">
        <Form />
      </div>
    </FormProvider>
  );
}

子组件Form：

import "./styles.css";
import { useForm } from './FormContext';

export default function Form() {
  const { values, updateField } = useForm();

  return (
    <div className="App">
      <input 
        type="text" 
        value={values.name} 
        onChange={(e) => updateField('name', e.target.value)}
      />
      <input 
        type="text" 
        value={values.phone} 
        onChange={(e) => updateField('phone', e.target.value)}
      />
      <input 
        type="text" 
        value={values.pincode} 
        onChange={(e) => updateField('pincode', e.target.value)}
      />
    </div>
  );
}

该方案适合跨多层组件共享状态的场景，避免Props传递繁琐。

3. 状态管理库（大型应用） #

如果是大型项目，表单状态逻辑复杂，可使用Redux、Zustand、Jotai等状态管理库，将表单状态托管到全局状态，组件通过对应API获取和更新状态，进一步解耦组件与状态逻辑。

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