如何更新具有数组的useState，在该数组中我有对象，当输入值在react js中发生变化时，该对象将更新

Question

   const [fvalues,setFvalues]=useState(data.map((ele,id)=>{
    return(
    {mobile:'',age:'',emailId:'',destinationAddress:'',destinationPin:''}
    );
}));

我想在输入标签值发生变化时更新这些对象

let handleChange = (e)=>{
    let {name,value}=e.target;
    data.map((ele,id)=>{
        // return setFvalues({ ...fvalues[id], [name]: value });
        setFvalues(fvalues[id].name)
    })
    // setFvalues(fvalues[0].name=value)
    console.log(name,value);
}

但这种逻辑不起作用

我已经映射了 forms 并希望通过一个提交按钮提交所有 forms，我想更新用户输入的输入值

{datas.map((ele, id) => {
                    let val = id + 1;
                    return (
                        <>
                            <Box key={id}>
                                {/* <HealthAndContactPass key={id} fun={handelSubmit} psName={ele?.psName} address={ele?.address} /> */}
                                {/* <HealthAndContactPassForm errors={errors} handleSubmit={handleSubmit} register={register} id={id} psName={ele?.psName} address={ele?.address} onSubmit={onSubmit}/> */}
                                <Typography className={styles.psName}>{ele.psName}</Typography>
                                <Box className={styles.white_box}>
                                    <Box className={styles.form_flex}>
                                        <Box className={styles.mobile}>
                                            <Select className={classes.select} name='countryCode' defaultValue={'+91'} value={code} {...register("code")}>
                                                <MenuItem className={styles.code_id} value={'+91'}>+91</MenuItem>
                                                <MenuItem className={styles.code_id} value={'+25'}>+25</MenuItem>
                                                <MenuItem className={styles.code_id} value={'+12'}>+12</MenuItem>
                                                <MenuItem className={styles.code_id} value={'+13'}>+13</MenuItem>
                                            </Select>
                                            <TextField helperText={ferrors?.mobile}  value={fvalues[id].mobile} name="mobile" classes={{ root: classes.textField }} InputProps={{ className: classes.textField }} label="Mobile Number" variant="outlined" onChange={handleChange} />
                                            <TextField value={fvalues[id].emailId}  name="emailId" classes={{ root: classes.textField }} InputProps={{ className: classes.textField }} label="Email Id" variant="outlined" onChange={handleChange}  />
                                            <TextField value={fvalues[id].age}  name="age" classes={{ root: classes.textField }} InputProps={{ className: classes.textField }} label="age" variant="outlined" onChange={handleChange}  />
                                        </Box>
                                    </Box>
                                    <Box className={styles.form_flex2}>
                                        <TextField value={fvalues[id].destinationAddress} name="destinationAddress" classes={{ root: classes.textField }} InputProps={{ className: classes.textField }} label="destinationAddress" variant="outlined" onChange={handleChange}  />
                                        <TextField value={fvalues[id].destinationPin} name="destinationPin" classes={{ root: classes.textField }} InputProps={{ className: classes.textField }} label="destinationPin" variant="outlined" onChange={handleChange}  />
                                    </Box>
                                    <Box className={styles.hr}></Box>
                                    {id===0?(
                                        <Box className={styles.addres}>
                                        <ThemeProvider theme={theme}>
                                            <Checkbox className={classes.check} {...label} />
                                        </ThemeProvider>
                                        <Typography className={styles.selectAdd}>Select same address for all</Typography>
                                    </Box>):null
                                    }
                                </Box>
                            </Box>
                        </>
                    )
                })}

Answer 1

在这种情况下，您不会“更新”state 数组本身，而是创建 state 数组的克隆，然后修改您想要的值并将 state 设置为此克隆数组。 我不太确定你到底想对数组做什么，但请看下面的一般示例：

const [state, setState] = useState([{mobile:'',age:'',emailId:'',destinationAddress:'',destinationPin:''}]);

let handleChange = e => {
   const {name, value} = e.target;
   const stateClone = state.map((item, i) => ({...state[i], [name]: value }))
   // do what you want to this new array
   setState(stateClone); // update the state array with the new values


}

Answer 2

如果你想更新一行的一列，你可以创建一个回调，它会带一个索引（当你呈现行数组时你会得到）并且会返回一个回调，它会带事件（触发时该事件由浏览器调度），这将更新您的价值。

然后，您只需要通过克隆旧数组（使用Array.prototype.map ）并在任何给定索引处映射行的新值来触发新的 state 更改。 如果索引不匹配，这意味着映射的行与更改事件无关，因此我们按原样返回该行。

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

const App = () => {
  const [rows, setRows] = useState([
    {id: 1, value: ""},
    {id: 2, value: ""},
    {id: 3, value: ""}
  ]);

  const handleRowValueChange = useCallback(index => ({currentTarget: {value}}) => {
    setRows(rows.map((row, rowIndex) => {
      if (rowIndex === index) {
        return {
          ...row,
          value
        };
      }

      return row;
    }));
  }, [rows]);

  return (
    <table>
      <tbody>
        {rows.map((row, index) => (
          <tr key={row.id}>
            <td>
              <input value={row.value} onChange={handleRowValueChange(index)} />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default App;

Answer 3

将您的handleChange function 定义更新为

let handleChange = (e)=>{
    let {name,value}=e.target;
    const newData = data.map((ele,id)=>{
        return { ...fvalues[id], [name]: value };
        // setFvalues(fvalues[id].name)
    })
    setFvalues(newData);
    console.log(name,value);
}

在这里，您将首先使用 data.map 创建一个新数组 ( newData )，然后使用data.map调用分配与新 state 相同的setFvalues 。

目前，您正在 data.map 中调用setFvalues ，因为在data.map方法的每次迭代中， map会一次又一次地使用单个数组元素（在您的例子中为 object）进行更新。