无法编辑在通用表单组件中传递的状态对象

Posted 2023-02-23

【中文标题】无法编辑在通用表单组件中传递的状态对象

【英文标题】：Can't edit a state object passed in generic form component

【发布时间】：2021-05-18 14:02:11

【问题描述】：

我尝试根据我发送给他的对象属性创建一个通用组件，我可以在其中通过 TextInput 元素对其进行编辑。

如您所见，我根据属性生成每个 textInput，并使用“onChange”事件使其工作。 但是，当我编辑我的对象时，就好像副本不起作用。 明确地说，我编辑了对象属性值，但如果我编辑另一个，之前的属性将被重置。

这是我的主要组件：

const MainComponent= () => 

    const [data, setData] = useState(
        firstname: '',
        lastname:'',
        gender:'',
        age: 25 
    );

    useEffect(() => 
        console.log(data);
    , [data])

    return (
        <>
           <Form data=data setData=setData />
        </>
    )


export default MainComponent;

这里是我的表单组件：

const Form = (data, setData) => 
    const [inputArr, setInputArr] = useState([]);

    const handleChange = (inputName) => (event) => 
        setData(
            ...data,
            [inputName]: event.target.name
        )
           

    const generateInputs = (obj) => 
        const arr = [];
        for(const props in obj) 
            arr.push(
                    <input type="text" onChange=() => handleChange(props) value=data[`$props`].toString() />
            )
        
        return arr;
    

    useEffect(() => 
        const res = generateInputs(data);
        setInputArr([...res]); 
    , [])

    return (
        <>
            
                inputArr.map((item, index) => (
                    <div key=index>
                        item
                    </div>
                ))
            
        </>
    );


export default Form; 

所以，如果有人有想法......提前谢谢你！

【参考方案1】：

你可以这样做：

const Form = ( data, setData ) => 
  const handleChange = (event, inputName) => 
    setData( ...data, [inputName]: event.target.value );
  ;

  return (
    <>
      Object.keys(data).map((item, index) => 
        return (
          <div key=index>
            <input
              type="text"
              onChange=(e) => handleChange(e, item)
              value=data[item]
            />
          </div>
        );
      )
    </>
  );
;

主要问题是您的 handleChange 函数的定义、您在 onChange 中向该函数传递（未传递）参数的方式以及将数据传递给输入的 value 属性的方式.

我通常也不建议将标记保存到状态。通常最好只保存渲染组件所需的状态。

Sandbox Example