React Js：如何在回调中使用 UseState？答案

【问题标题】：React Js : How to use UseState In CallBack?React Js：如何在回调中使用 UseState？
【发布时间】：2021-06-01 07:12:09
【问题描述】：

我有以下代码：

import React,{useState} from 'react'

function ReactForm() {
    const iState =[{
        Name : '',
        Email :'',
        Salary :0
    
    }]
const [state, setstate] = useState(iState);
    function validationHandler()
    {
        console.log(state);
    }

    return (
        <div>
            Name : <input type="text" onChange={(e)=>{setstate(...state, state.Name=e.target.value)}}></input>
            <br></br>            
            Email : <input type="text" onChange={(e)=>{setstate(...state, state.Email=e.target.value)}}></input>
            <br></br>            
            Salary : <input type="text" onChange={(e)=>{setstate(...state, state.Salary=e.target.value)}}></input>
            <br></br>
            <button onClick={validationHandler}>Validate Us</button>
        </div>
    )
}

export default ReactForm

我在这里执行基本验证。我收到错误消息：TypeError: state is not iterable

在通过 stackoverflow 上的几个链接之后，我添加了 - [ ] over state ，但它没有帮助。

编辑 1：

添加后 :- setstate({...state, state.Name: e.target.value}) : 意外令牌，预期 "," (18:79)

【问题讨论】：

setstate({...state, state.Name: e.target.value})
@boxdox - 我应用了这个，但出现错误，请参阅 Edit1
还将iState 移到你的ReactForm函数之外，否则你每次击键都会创建一个新的iState。
您可以将 iState 保持为对象并像这样更新状态： setstate({...state, Salary: e.target.value});
每次渲染都会创建 iState，但只会使用第一个。您的状态也是一个数组，但您似乎认为它是一个对象。 setter 中的 = 而不是 : 似乎你需要先更好地学习一些 JS 基础

标签： javascript reactjs react-hooks state

【解决方案1】：

您可以使用name 属性，而不是为每个输入调用 setState，并可以如下重构代码

import React, {useState} from 'react';

function ReactForm() {
  const [state, setstate] = useState({
    Name: '',
    Email: '',
    Salary: 0,
  });

  const handleChange = (e) => {
    const {name, value} = e.target;
    setstate((prevState) => ({...prevState, [name]: value}));
  };

  function validationHandler() {
    console.log(state);
  }

  return (
    <div>
      Name :{' '}
      <input
        type="text"
        value={state.Name}
        name="Name"
        onChange={handleChange}
      />
      <br></br>
      Email :{' '}
      <input
        type="text"
        value={state.Email}
        name="Email"
        onChange={handleChange}
      />
      <br></br>
      Salary :{' '}
      <input
        type="text"
        value={state.Salary}
        name="Salary"
        onChange={handleChange}
      />
      <br></br>
      <button onClick={validationHandler}>Validate Us</button>
    </div>
  );
}

export default ReactForm;

参考：

Controlled Component

【讨论】：

【解决方案2】：

您的初始状态是一个对象数组。我不确定这是否是您要找的。p>

假设您的 iState 是（只是一个对象）

const iState = {
  Name: '',
  Email: '',
  Salary: 0
}

那么你应该在你的onChange监听器中做这样的事情

// setState should use camel case for best pratice BTW
const handleChangeName = e => setstate({
  ...state, 
  Name: e.target.value
});

如果你坚持数组状态，监听器应该看起来像这样。

const handleChangeName = e => setstate([
  ...state,
  {
    ...state[0], // or whatever index you may use in the future
    Name: e.target.value
  }
]);

【讨论】：

【解决方案3】：

你可以做以下作业 state.Name=e.target.value****:

您使用的是 array 而不是对象，因此您无法使用 state.Name=e.target.value 访问任何内容

因此，如果想以与您使用相同的方式直接访问它，您必须使用 state 属性作为 OBJECT 而不是 ARRAY：

const iState = {
  Name: '',
  Email: '',
  Salary: 0

}

而有form处理的组件的标准是使用stateful组件

或

您可以使用无状态（功能）组件并使表单每个表单字段都有自己的状态：

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [salary, setSalary] = useState(0);

所以组件将是：

import React, { useState } from 'react'

function ReactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [salary, setSalary] = useState(0)

  function validationHandler() {
    console.log('Name: ' + name);
    console.log('Email: ' + email);
    console.log('Salary: ' + salary);
  }

  return (
    <div>
      Name : <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}></input>

      <br></br>

      Email : <input
        type="text"
        value={email}
        onChange={(e) => setEmail(e.target.value)}></input>

      <br></br>

      Salary : <input
        type="text"
        value={salary}
        onChange={(e) => setSalary(e.target.value)}></input>

      <br></br>

      <button onClick={validationHandler}>Validate Us</button>
    </div>
  )
}

export default ReactForm;

【讨论】：