如何更新具有數組的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）進行更新。