我是第一次使用React，并尝试使用useState制作表单。我得到一个错误："TypeError: setValues不是一个函数handleInputChange“
首先，让我们来解释一下这个错误的原因。根据提供的错误信息，可以看出问题出在"setValues不是一个函数handleInputChange"。这个错误通常是由于setValues没有正确地定义或者没有被正确地传递给handleInputChange函数导致的。
在React中，useState是一个React的Hook函数，它用于在函数组件中添加状态。它返回一个数组，包含两个元素：当前状态的值和一个用于更新状态的函数。在你的情况下，setValues应该是一个用于更新表单值的函数。
要解决这个错误，首先确保你正确地使用了useState函数，并且将其返回的更新函数赋值给了setValues。例如：
const [values, setValues] = useState(initialValues);在这个例子中，values是当前状态的值，setValues是用于更新状态的函数。initialValues是你的表单的初始值。
接下来，确保你正确地定义了handleInputChange函数，并且在函数内部使用了setValues函数来更新表单的值。例如：
const handleInputChange = (event) => {
setValues({
...values,
[event.target.name]: event.target.value
});
};在这个例子中，我们使用了ES6的展开运算符(...)来复制当前的表单值，然后使用event.target.name和event.target.value来更新特定字段的值。
最后，如果你仍然遇到相同的错误，可能是由于其他代码或逻辑问题导致的。你可以检查其他部分的代码，确保没有其他地方重新定义了setValues或者没有正确地传递setValues给handleInputChange函数。
总结一下，要解决这个错误，你需要确保正确地使用useState函数，并将其返回的更新函数赋值给setValues，同时在handleInputChange函数中正确地使用setValues来更新表单的值。
相关·内容
当我在handleInputChange上使用setValues()函数时，我得到这个错误： ? 代码： import React, { useState, useEffect } from "react";
const useForm = (initialFieldValues) => {
const { values, setValues } = useState(initialFieldValues);
const handleInputChange = (e) => {
const { name, value } = e.tar
浏览 25提问于2020-04-25得票数 1
回答已采纳
import React, {useState} from "react"
import {Grid, TextField} from "@material-ui/core"
const initialFieldValues = {
sName: ''
}
const StudentForm = (props) => {
const {values, setValues} = useState(initialFieldValues)
const handleInputChange = e => {
浏览 18提问于2020-06-10得票数 0
1回答
我正在用可重用的组件构建一个react表单。
我想更新我的json以便我可以嵌套一些数据，但是我得到了一个“受控的和不受控制的”错误(再次！)但我解决不了。我一直在研究这个问题，但我可能缺乏有效的词汇。我应该在哪里或如何定义“宠物”？
后来，我的目标是能把几只宠物加到一个主人身上。
PetsForm
import React, { useState, useEffect } from 'react';
import Controls from './reusables/Controls';
import { useForm, Form } from '.
浏览 1提问于2021-05-26得票数 0
回答已采纳
我试图使用自定义钩子来管理表单，所以我有以下代码
FormHook.tsx:
import { useState } from 'react';
interface ICampos {
name: string;
email: string;
password: string;
}
const useForm = (initialState: ICampos) => {
const [values, setValues] = useState(initialState);
const handleInputCh
浏览 2提问于2020-06-28得票数 5
回答已采纳
2回答
我才刚开始学打字稿。我试图从Javascript迁移一个项目，但是我被一个定制的钩子卡住了。
钩子useForm只处理表单中输入的onChange事件，然后更新它们的值，这样我就可以写入和控制它们的状态。
interface formProps{
initialValues: {[key: string]: string}
}
export const useForm = ( initialState: formProps['initialValues'] ) => {
const [values, setValues] = useState(initialSt
浏览 6提问于2022-04-20得票数 0
回答已采纳
我正在通过自定义form react bootstrap创建一个表单，但是我有一个问题， A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the compone
浏览 10提问于2020-08-28得票数 1
回答已采纳
2回答
我目前正在尝试使用React和Material构建一个表单，其中我的最终有效负载必须如下所示：
{
title: title,
quadrants: {
0: { name: quadrantOne },
1: { name: quadrantTwo },
2: { name: quadrantThree },
3: { name: quadrantFour }
}
}
我的表单的相应部分(包括初始值)结构如下：
const initialValues = {
title: '',
quadrants: {},
};
con
浏览 0提问于2020-12-09得票数 1
回答已采纳
我试图创建一个有反应的形式。此表单使用我多次创建的自定义输入组件。在父表单中，我试图获得一个包含表单所有名称和值的完整对象：
{inputName: value, inputName2: value2, inputName3: value3}
为此，我创建了一个‘组件更新’钩子，它调用函数属性onNewValue将新值发送给父(双向数据绑定)：
useEffect(() => {
if (onNewValue) onNewValue({ name, value });
}, [value]);
父表单接收handleInputChange函数中的数据：
export
浏览 4提问于2019-10-11得票数 1
回答已采纳
我正在制作一个带有验证的react表单。我必须在验证后显示错误。所以我使用了useState()钩子，如下所示。但是我似乎不能更新新的状态，因为它总是返回初始值。我哪里错了？
import React, { useState } from 'react';
import './index.css';
const Firstname = ({ handleInputChange, firstName }) => {
const [error, setError] = useState('hi');
const handl
浏览 2提问于2020-08-13得票数 0
我使用React和FluentUI来构建一个简单的表单，代码如下
import React, { useState, FormEvent } from "react";
import { PrimaryButton } from "office-ui-fabric-react/lib/Button";
import { IUserFormValues } from "../../models/user";
import { Stack, TextField } from "@fluentui/react";
const Ne
浏览 2提问于2021-01-01得票数 4
回答已采纳
2回答
传递表单数据以表示
、、、、
很难传递一些数据来表达。我正在尝试发送从表单中收集到的一些数据。窗体值正在正确更新。但是当我到达终点时，我不知道如何注销我正在传递的内容。任何指示都将不胜感激。
快递：
app.post('/something-to-post', cors(corsOptionsDelegate), (req, res)=> {
//how do I log what I am passing from the form
console.log('full name:', req.data);
});
反应
import React, {useState} fro
浏览 1提问于2020-01-31得票数 0
回答已采纳
1回答
我有一个表单，它可以将数据发送到云数据库。当第一次加载页面时，将呈现来自数据库的数据，但当使用表单更新此数据时，不会更改。我不知道如何再次渲染它。我想它使用的是useEffect。 下面是一些代码： const user = useContext(UserContext);
const { userName, position, phoneUser } = user;
const initialStateValues = {
userName: "",
phoneUser: "",
position: "",
}
浏览 23提问于2020-11-17得票数 0
回答已采纳
React.js的状态和事件的类型是什么？
在我下面的代码中，我只能通过使用type: any让它工作，但这只是一个技巧。如何为它们使用正确的类型？
在我的自定义钩子中：
如果我使用function useFormFields(initialState: object)，我会得到：
// value={inputs.item} error:
Property 'item' does not exist on type 'object'.ts(2339)
// onChange function error:
(JSX attribute) onChange: o
浏览 18提问于2020-02-09得票数 1
回答已采纳
2回答
我在值中有一个数组，我希望使用表单中的"name“属性来更改状态，但它不起作用。我做错了什么？
const initialFlashcardState = {
collection_name: '',
prompt: '',
answers: ['1', '2', '3', '4'],
right_answer: 1,
};
const [values, setValues] = useState(initialFlashcardState);
const handleI
浏览 6提问于2022-01-31得票数 0
3回答
我正在制作一个非常简单的react应用程序，将基本细节作为输入。
我在上下文中有这些形式的值。
context.js
import React, { useState } from "react";
export const FormContext = React.createContext();
export function FormProvider({ children }) {
const [formValue, setFormValue] = useState({
basicDetails: {
firstName: "John&#
浏览 9提问于2021-04-26得票数 1
回答已采纳
我已经用React钩子和useState重构了一个表单，但是我不能触发提供给input标记的onChange的函数handleChange。下面是代码: useState方法
const [data, setData] = useState({
newDate: '',
startTime: '',
endTime: '',
});
const { newDate, startTime, endTime } = data;
handleInputChange方法
const handleInputChange = (e)
浏览 0提问于2020-06-16得票数 2
我有我简单的crud反应钩子应用程序与asp.net核心webapi。课程组件显示列表，但当单击链接编辑特定课程时，表单显示为空字段。课程组件jsx如下所示：
import React, { useState, useEffect } from "react";
import {connect} from 'react-redux';
import CourseList from "./CourseList" ;
import * as actions from "../_actions/courseActions";
impor
浏览 13提问于2020-05-10得票数 0
下面是这个错误。在我的代码中，问题在哪里？到目前为止，我在谷歌或堆栈溢出网站上看到的解决方案都没有帮助。
警告:组件正在将受控输入更改为不受控制。这很可能是由定义的值更改为未定义的值引起的，这种情况不应该发生。决定在组件的生存期内使用受控输入元素还是不受控制的输入元素。
有两个文件，我的大部分客户代码是在。ContactForm.js & Contact.js
我所学习的教程是。在37:27，我们看到编辑图标被点击，它填充字段&这对我来说是不可能的。
源代码是。
ContactForm.js
import React, { useState, useEffect } f
浏览 1提问于2021-07-30得票数 0
1回答
我第一次在React中使用类型，我对它不太熟悉。
我试图将子组件中的表单中的数字添加到数字数组中。
为此，我创建了一个useState钩子：
const [valuesList, setValuesList] = useState<number[]>([]);
现在，我试图将setValuesList挂钩传递给子组件：
<AddNum
setValues={setValuesList}
/>
在子组件中，我为道具定义了一个接口：
interface AppProps {
setValues: (value: number) => v
浏览 0提问于2020-07-15得票数 0
回答已采纳
4回答
如何知道表单输入是否为空()
、、、、
我有一个表单，其中我想知道输入值是否为空--当未被发送时。我试图通过handleInputChange的if来实现它，但这是行不通的：
const handleInputChange = (e: React.FormEvent<HTMLInputElement>) => {
if ((e.target as HTMLInputElement).value) {
setNewPost({
...newPost,
[(e.target as HTMLInputEleme
浏览 3提问于2022-02-20得票数 0
回答已采纳
1回答
在功能组件中消除反弹
、、、
我有一个函数组件，它包含了debounce：
import React, {useCallback, Component, useState} from 'react';
import debounce from 'lodash.debounce';
function Tags() {
const [type, setType] = useState('');
...
async function getSearchTag(keyword) {
....
await axios.post(ajax_url
浏览 6提问于2021-04-04得票数 0
我必须检查表单输入的有效性，这是我的代码 //onSave is a button save
const onSave = (event) => {
const invalid = [];
["name", "description", "category"].forEach(key => {
if (key.value.matches("/[0-9]+/)")) {
invalid.push(key);
alert("Not allow numb
浏览 31提问于2020-09-02得票数 1
回答已采纳
1回答
我正在制作一个包含文本区域和多个复选框来定义类别的表单。如果类别是分开的，我可以正确地更新它们，但是我不能将它们集成到主对象中。
import React, { useState } from "react";
import { Button, ToggleButton, ToggleButtonGroup, Form } from "react-bootstrap";
import checkboxes from "./components/checkboxes";
import Checkbox from "./components
浏览 2提问于2020-06-26得票数 0
回答已采纳
对于以前版本的react hook form，如果您使用以下几行代码创建了另一个form对象，则可以使用多个form： const {
register: register2,
handleSubmit: handleSubmit2,
errors: errors2
} = useForm() 现在，语法更改为formState后，第二种形式的errors对象不会被创建，并抛出一个错误。 const {
register: register2,
handleSubmit: handleSubmit2,
formState: {
浏览 59提问于2021-05-11得票数 0
回答已采纳
我用的是反应和安特。
我在使用antd的输入组件。
如果输入的字符超过10个，我希望在输入表单底部显示一条错误消息。
我想用antd的errorMessage。
import React from "react";
import { Input } from "antd";
const App = () => {
const [value, setValue] = React.useState(null);
const [onSave, setOnSave] = React.useState(null);
const handleInput
浏览 3提问于2021-10-06得票数 0
回答已采纳
我使用AsyncSelect创建文本输入，使用REST api搜索文本，并在选择列表中显示结果。一切都很正常，但是当我第一次加载页面时，我看到了AsyncSelect的加载动画。我试图阻止这种情况，但如果输入中没有文本，则返回null，但我仍然可以看到动画。你有什么想法吗？
import React, { useState } from 'react';
import AsyncSelect from 'react-select/async';
const MainBanner = () => {
cons
浏览 8提问于2021-03-08得票数 1
回答已采纳
下面的代码有什么问题？在使用useState时，我收到了打字提示 import * as React, { useState } from 'react'
const useForm = (callback: any | undefined) => {
const [inputs, setInputs] = useState({}) //error: Cannot find name 'useState'.ts(2304)
const handleInputChange = event => {
event.persist()
浏览 154提问于2020-03-19得票数 3
回答已采纳
我上周得到了帮助，我有50%的工作，选择组件的材料，V.5.0和反应18.0。Select与map函数一起正常工作。问题是所选的项目不会显示，也不会保持选中。此外，的大小不接受宽度格式。我尝试过，Box和sx={}，但它们都没有起作用。请大家帮忙，我们将不胜感激。
// Select is down bellow almost at the end. Above the button.
import React, { useState } from 'react';
import { Container } from '@mui/material';
im
浏览 3提问于2022-06-06得票数 1
回答已采纳
我试图发送一个用户名，用户填写到我的服务器。我已经有了一个post请求，它向服务器发送其他信息，我希望使用相同的post请求，并将新的用户名值添加到im发送的内容列表中。即使我给表单输入了一个type=“文本”，我仍然会收到这个错误。
这是我的表单代码：
import React, { useState } from "react";
export default function UserForm() {
const [values, setValues] = useState();
const onSubmit = async (event) => {
浏览 5提问于2022-04-28得票数 -1
3回答
我想要创建一个表单来将某种形式的数据模型保存到数据库中。
假设我有个课：
export default class Model {
constructor(model = {}) {
this.x = model.x || '';
this.y = model.y || '';
}
save() {
// code to save 'this' to database
}
}
还有一个组成部分：
import { React, useState } from
浏览 0提问于2021-06-18得票数 4
回答已采纳
我正在尝试开发一个CRUD应用程序的U。我的编辑表单总是说一些东西是未定义的。它是说“药品名称”标签下的“名称”是未定义的。 import React, { useEffect, useState } from "react";
const EditMedicineForm = (props) => {
const initialFormState = { id: null, name: "", directions: "" };
const [medicine, setMedicine] = useState(props.cur
浏览 29提问于2021-01-23得票数 1
3回答
我正在制作一个简单的react应用程序，其中我有一些默认值要设置为输入字段。
这里有三个输入字段，
-> Textbox = UserName
-> Checkbox = Relocation
-> Radio = ContactMode
他们各自的价值观是，
{
UserName: "Test User",
Relocation: true,
ContactMode: "Email",
}
工作片段：
const { useState } = React;
const App = () =&
浏览 3提问于2020-11-05得票数 0
回答已采纳
新的反应是，我探索自定义钩子，构建一个简单的表单管理器：
首先，钩子(在components/hooks文件夹中)：
import React, {useState} from 'react'
const useJalonForm = () => {
const [inputs, setInputs] = useState({})
// Handle form submission
const handleSubmit = (event) => {
if (event) {
event.preven
浏览 1提问于2020-10-19得票数 1
1回答
我正在努力寻找一种高效的方法来编写函数，而不会像这样创建重复的函数。
const InputChange = (initialValue, validateInputChange = false, validate) => {
const handleInputChange = (event) => {
const { name, value } = event.target; // <- Target Name and Value
setValues({
...values,
[name]: value,
});
}
浏览 8提问于2021-05-26得票数 0
回答已采纳
3回答
我有一个表单组件，其中包含一个应该更新的状态(在输入更改时)，它看起来如下所示： import { useState } from 'react';
export const Test = () => {
const [state, setState] = useState({
name: 'khaled',
age: 18
})
const handleInputChange = (e) => {
let stateCopy = state
for(let key in stateCopy) {
浏览 31提问于2021-11-04得票数 0
回答已采纳
我正在制作React Crud应用程序，当我试图从axios发送数据到API控制器时，我无法发送这些数据，当我检查API时，我发现所有的值都是空的。但使用与POSTMAN相同的API和值，它可以完美地工作。我该如何解决这个问题呢？ import React, { FormEvent, useState } from 'react'
import { Segment, Grid, GridColumn, Button, Form, Container } from 'semantic-ui-react'
import { IEmployee } from
浏览 5提问于2020-06-29得票数 0
3回答
我以前在react项目中这样做过。 const [formState, setFormState] = useState({ username: '', password: '', });
const handleInputChange = (e)=>{
if(e.target.name==="username"){
setFormState({...formState, username:e.target.value })
}
if(e.target.name==="password
浏览 28提问于2020-04-16得票数 0
回答已采纳
1回答
我第一次使用类型记录创建了一个上下文，我很难让它发挥作用。每次我尝试创建接口并将它们放入我的价值支柱中时，我都会遇到错误，我真的需要一些帮助。这是我的上下文(我会在评论中指出错误)
在IContext中，我不知道如何将事务的类型(它是一个对象数组)
我想传递值支柱、两个函数、事务数组和输入中的所有内容。
不管怎么说，这是我第一次在一个更大的项目中应用打字稿，所以如果你们对如何更好地练习它有任何建议，请告诉我。
import React, { createContext, useState, ChangeEvent } from 'react';
interface ICont
浏览 3提问于2020-07-11得票数 2
回答已采纳
我有一个函数function组件，它有一个对象，它由以function形式呈现的不同值组成。
const initialInputValues = {
domain: '',
title1: '',
title2: '',
title3: '',
title4: '',
title5: '',
title6: '',
title7: '',
description1: '',
description2: '
浏览 9提问于2022-10-01得票数 1
我有TypeError:无法对‘Object(.)(.)’的属性'setValues‘进行重构因为它是未定义的.错误和我不确定为什么.我有一段来自App.js的代码：
import { DataProvider, useData } from "./DataContext";
function App({ ...rest }) {
const { setValues, data } = useData();
...
和DataContext.js
import React, { createContext, useState, useContext } fro
浏览 6提问于2021-05-15得票数 0
回答已采纳
我正在尝试从正在工作的Express api中获取数据，但前面有问题，似乎当我更改输入状态时，即使在更新输入状态后调用函数提取数据，也会出现延迟。
这是我的组成部分：
import React, { useState, useEffect } from 'react';
import UsersList from './UsersList.js';
function SearchBox() {
const [input, setInput] = useState("");
const [githubUserResult, se
浏览 3提问于2022-11-10得票数 0
回答已采纳
React挂钩useEffect缺少依赖项：“callback”和“isSubmit”。尝试验证注册表，但我得到此错误仍然是一个新手反应，请帮助 import { useState, useEffect } from "react";
const useForm = (callback, validate) => {
const [values, setValues] = useState({
firstName: '',
lastName: '',
email: '
浏览 21提问于2020-09-12得票数 0
我正在尝试使用openweathermap api构建一个天气应用程序。正如您在下面的代码中所看到的，我使用一个布尔状态来检查表单何时被求和，这样我就可以将该值传递给<Result>组件(我使用硬代码检查了该组件，它可以正常工作)。我希望函数changeCity(在应用程序中)返回传递了city值的<Result>组件，同时更改cityEmpty状态。但是当我在return() {(cityEmpty) ? changeCity() : null}中传递它时，我遇到了问题
import React, {useState} from 'react';
im
浏览 0提问于2020-09-29得票数 0
我很难有一个select组件来删除(巴西的)州列表，在那里我可以在应用程序中使用几种形式(客户端、供应商等)。因此，我分别创建了一个Select，我希望在我的Bank表单中使用这个"Select“组件来选择银行所在的状态(位置)。我得到了一个错误的映射函数，在选择组件，而且，表单库崩溃，我不知道如何正确地使用数组的选择在银行表单。在银行表格中导入什么和如何处理？，我将感谢所有的帮助收到。我使用的材料-ui 5.0和反应18.0和Linux Ubunto 20.04。
// Bank form
// Select is at 3/4 down bellow
import { Con
浏览 5提问于2022-06-04得票数 0
回答已采纳
我正在尝试创建一个crud应用程序，除了更新功能之外，一切都很正常。当我单击保存按钮来更新表中的特定数据时，我只得到了id，所有其他字段都返回为空，我不知道我遗漏了什么，但响应日志显示status 200，只是我看不到我在db.json中所做的更改，除了一个每个记录没有其他数据的id。非常需要帮助。谢谢!
下面是我的更新代码：
const [users, setUsers] = useState([]);
const [currentUser, setCurrentUser] = useState(initialFormState);
const [editing, setEditing] =
浏览 0提问于2020-08-03得票数 0
1回答
React:更新数组时观察到延迟
、、、、
我在输入上遇到了问题，而不是想要在数组中进行更改，当这个数组有超过8个数组列表时，在输入时会有很多延迟/延迟，我制作下面的代码来简单地重现我的代码发生的事情。
App.js
import './App.css';
import React,{useState} from 'react';
import Inputs from './Inputs'
function App() {
const [ array, setArray ] = useState([
["John",'30','ttt
浏览 25提问于2021-06-10得票数 1
回答已采纳
我正在尝试构建一个登录/注册表单，使用react和node / express / (mongo)作为我的后端。后端运行良好。当我向/register发送POST请求(使用postman)时，一切正常，凭据存储在数据库中。 我现在尝试在客户端使用react实现表单，但当我尝试发布时，我总是得到错误：Unhandled Rejection (TypeError): Failed to fetch。 这是我的代码： import React, { Component } from 'react';
class Register extends Component {
sta
浏览 404提问于2020-04-03得票数 0
回答已采纳
在我的React Signup组件中是一个表单，用户可以在其中输入他们的电子邮件、密码和密码确认。我正在尝试使用jest/react- test -library编写测试，但是我一直收到测试失败的消息，因为接收到的函数调用数为0，而预期调用数为1。
我尝试过Jest匹配器的变体，例如.toHaveBeenCalled()、.toHaveBeenCalledWith(arg1，arg2，...)、toBeCalled()，所有这些匹配器仍然期望1或更大的值，但都失败了，因为接收到的数字是0。我已经尝试了fireEvent.click和fireEvent.submit，它们仍然失败。
Signup
浏览 23提问于2019-11-07得票数 6
在处理从API.But加载选项的react-select AsyncSelect组件的问题时，我无法通过controller.AsyncSelect将信息传递到React-Hook表单。在我的"SelelectedValue“状态下，数据可以很好地返回。有人能帮我吗？ const [inputValue, setValue] = useState('');
const [selectedValue, setSelectedValue] = useState(null);
// handle input change event
cons
浏览 65提问于2021-07-11得票数 3
回答已采纳
我有一个功能很好的表单，但我需要使验证立即生效(一旦用户离开了字段的焦点，我希望只为该字段显示错误消息)。目前，我有一个验证，在单击submit按钮时显示错误消息：
以下是代码：
useForm hook
import { useState, useEffect } from 'react';
const useForm = (callback, validate, post) => {
const [values, setValues] = useState(post || {});
const [errors, setErrors] = us
浏览 2提问于2021-04-01得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
