如何使用 useState 更新数据? [英] How to use useState to update Data?

问题描述

我正在构建一个多步表单，我正在尝试使用 useState-Hook 更新我的数据.

不幸的是，在执行 onClick 事件后，我不知道如何将钩子的组件作为道具传递，以更新它们

那是我代码的重要部分

multisteform.js

const defualtData = {基本原理:'',豪斯:豪斯"，Wohnung:Wohnung"，Gewerbe:Gewerbe"，}const 步骤 = [{id: 'Häuser'},{id: 'Fläche'},{id: 'Grundstückerschlosse'},{id: 'Bebauungsmöglichkeiten'}]export const MultiStepFrom = () =>{const [formData, setForm] = useState(defualtData)const {step, navigation} = useStep({脚步，初始步长:0，})const props = {formData, setForm, navigation}开关(step.id){案例'Häuser':return <Häuser {...props}/>案例'Fläche':return <Fläche {...props}/>}}导出默认 MultiStepFrom

Häuser.js

 function Häuser({ formData, setForm, navigation }) {const { Grundstück, Haus, Wohnung, Gewerbe } = formData;const changState = () =>{导航.下一个()；//setForm([{ Grundstück: 'Grund', Haus:'Hauss' }]);//这是我的问题setForm(...formData, {Grundstück:G"，})}

那是下一页(但数据没有到达那个组件，如果我控制台 .log (formData) 我只是得到一个空数组我也无法定位数组的数据

function Fläche({formData, setForm, navigation}) {控制台日志(表单数据)console.log(Grundstück, Haus, Wohnung)

解决方案

使用 setForm 如下所示.

setForm({ ...formData, Grundstück: 'G' });

I am building a multistep Form and I am trying to update my Data with the useState-Hook.

Unfortunatly I do no how to pass the components of the hook as a prop, to update them, after performing an onClick Event

Thats the important part of my code

multisteform.js

const defualtData = {
    Grundstück:'',
    Haus:"Haus",
    Wohnung:"Wohnung",
    Gewerbe:"Gewerbe",


}

const steps = [
    {id: 'Häuser'},
    {id: 'Fläche'},
    {id: 'Grundstückerschlosse'},
    {id: 'Bebauungsmöglichkeiten'}
]





export const  MultiStepFrom = () => {

const [formData, setForm] = useState(defualtData)
    const {step, navigation} = useStep({
        steps, 
        initialStep: 0,
    })
    
    const props = {formData, setForm, navigation}

    switch(step.id) {
    case 'Häuser':
        return <Häuser {...props} />
     
     case 'Fläche':
         return <Fläche {...props} />   
}



   
}

export default MultiStepFrom

Häuser.js

    function Häuser({ formData, setForm, navigation }) {


   const { Grundstück, Haus, Wohnung, Gewerbe } = formData;

    const changState = () => {
        navigation.next();

       // setForm([{ Grundstück: 'Grund', Haus:'Hauss' }]);
        //Here is my problem
       setForm(...formData, {
           Grundstück: "G",
       })

    }

<div
       className="container__containerimgage"
         name="Grundstück"
          value={Grundstück}
         onClick={changState}
                                    
 >

Thats the next page (but the data is not reaching that component, if I console .log (formData) I am just getting an emtpy array Also I can not target the data of the array

function Fläche({formData, setForm, navigation}) {

console.log(formData)

    console.log(Grundstück, Haus, Wohnung)

解决方案

Use setForm like below.

setForm({ ...formData, Grundstück: 'G' });

这篇关于如何使用 useState 更新数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！