React JS 通过函数向数组添加数据

Question

我正在创建一个有用户输入的应用程序。使用这些输入，用户将进行选择。对于此示例，它使用 MUI 组件进行自动完成并有 4 个可用选项。

进行此选择后，我想将此选择附加到字典中的 'style' 键。在提交时，我想处理这个函数异步和 console.log 现在只是为了确保收集所有数据。我会迟到 post 这个 API。我创建了大部分内容，但我认为我的数据设置方式存在问题。我敢肯定比我聪明的人会知道我哪里出错了！

已经删除了相当多的内容，但这是准系统：

export default function JobParams() {

  const [page, setPage] = useState(0);
  const [dataTransfer, setdataTransfer] = useState({
    style: {},
    location: {},
    salary: {},
  });
  //trial
  const [activeStep, setActiveStep] = React.useState(0);
  const [skipped, setSkipped] = React.useState(new Set());
  const steps = ['Style ', 'Location ', 'Salary '];
  const [isSubmitting, setSubmitting] = useState(false)
  const [completed, setCompleted] = useState(false);

  function goNextPage () {
    if (page === 4) return;
    setPage(page => page+1)
  }
  
  function goBackPage () {
    setPage(page=> page-1)
    setCompleted(false)
  }

  function updateData(type, newData) {
    setdataTransfer(dataTransfer => {
      return {...dataTransfer, [type]: newData}
    })
  }
  
  async function submit() {
    //insert post method here or just hold the state 
      setSubmitting(true)
      await sleep(2000);
      // console.log(dataTransfer)
      setSubmitting(false)
      setCompleted(true)
    
  }



    return (

                    {/* Content goes here */}
                    {page === 0 && <ParamSelection data={dataTransfer.style} update={updateData}/>}
                    {page === 1 && <LocationSelection data={dataTransfer.location} update={updateData}/>}
                    {page === 2 && <SalarySelection data={dataTransfer.salary} update={updateData}/>}


                  {page === 0 && <ButtonSelectionEnd>
                    {page !== 0 &&<Button onClick={goBackPage}>Back</Button>}
                    {page !== 2 && <Button onClick={goNextPage}>Next</Button>}
                    {page === 2 && <Button type="submit" startIcon={isSubmitting ? <CircularProgress size="1rem"/> : null} onClick={submit} disabled={isSubmitting} onSubmit={async (values) => 
                      { await sleep(3000); 
                        console.log(values)
                        setCompleted(true)
                      }}
                      >
                        Submit
                      </Button>}
                  </ButtonSelectionEnd>}
                  
                  {page !== 0 && <ButtonSelection>
                    {page !== 0 &&<Button onClick={goBackPage}>Back</Button>}
                    {page !== 2 && <Button onClick={goNextPage}>Next</Button>}
                    {page === 2 && <Button type="submit" startIcon={isSubmitting ? <CircularProgress size="1rem"/> : null} onClick={submit} disabled={isSubmitting} onSubmit={async (values) => 
                      { await sleep(3000); 
                        console.log(values)
                        setCompleted(true)
                      }}
                      >
                        Submit
                      </Button>}
                  </ButtonSelection>}


    );
  }


function ParamSelection({data, update}){
  const newData={};

  return (
    <SelectionContainer>
      <StyleSelect onClick={()=> update('style', newData)}/>
    </SelectionContainer>
  )
}

function LocationSelection({data, update}){
  const newData={};

  return (
    <SelectionContainer>
      <LocationSelect/>
    </SelectionContainer>
  )
}

function SalarySelection({data, update}){
  return (
    <SelectionContainer>
      Show me the money!
    </SelectionContainer>
  )
}

底部的功能是独立的组件，每个组件都是输入字段。

如前所述。我希望每个人都登录到一个数组，也许通过：

  const [dataTransfer, setdataTransfer] = useState({
    style: {},
    location: {},
    salary: {},
  });

如果您当前使用控制台记录此操作，您会得到一个空数组。

我的功能有什么问题？

 function updateData(type, newData) {
    setdataTransfer(dataTransfer => {
      return {...dataTransfer, [type]: newData}
    })
  }

谢谢！！

Answer 1

尝试

function updateData(type, newData) {
    setdataTransfer({...dataTransfer, [type]: newData})
  }

Answer 2

用这个替换你的函数：

function updateData(type, newData) {
setdataTransfer(dataTransfer, dataTransfer[type] = newData)
}

或

function updateData(type, newData) {
setdataTransfer({...dataTransfer, [type]: newData})
}

React JS 通过函数向数组添加数据

React JS Adding Data to an Array through Functions

javascript

logging

reactjs