如何将 4input 数据存储到 anoptions 数组？

如何解决如何将 4input 数据存储到 anoptions 数组？

这是我的反应代码，我想使用反应形式创建民意调查，但我不明白我的代码出了什么问题......！`这里我有 4 个输入字段，带有 { option1: "",option2: " ",option3: "",option4: "" },但我不知道如何存储数据，就像我使用 POSTMAN 存储数据一样......！任何人都可以帮忙，请帮忙......！请帮助我不明白该怎么办...！用我的代码 请帮助......

import React,{ useState,useEffect } from "react";
import "../styles.css";
import { isAutheticated } from "../auth/helper/index";
import { createaPoll } from "./helper/adminapicall";

const AddPoll = () => {
  const { user,token } = isAutheticated();
  const [value,setValue] = useState({
    question: "",options: { option1: "",option2: "",error: "",loading: "false",getRedirect: false,formData: "",});

  const { question,options,error,loading,getRedirect,formData } = value;

  const handleChange = (event) => {
    // setError("");
    setValue({ ...value,[event.target.name]: event.target.value });
    // console.log(event.target.value);
    const newOption = {
      ...value.options,[event.target.name]: event.target.value,};
    setValue((prev) => ({ ...prev,options: newOption }));
  };

  const onSubmit = (event) => {
    event.preventDefault();
    setValue({ ...value,loading: true });
    // console.log(handel);
    createaPoll(user._id,token,{ question,options }).then((data) => {
      if (data.error) {
        setValue({ ...value,error: data.error });
      } else {
        setValue({
          ...value,question: "",});
      }
    });
  };

  return (
    <div className="AddPoll">
      <div className="container">
        <h1>Add New Poll</h1>
        <form>
          <textarea
            rows="4"
            cols="50"
            className="form-control mb-2"
            placeholder="Question"
            name="question"
            value={question}
            onChange={(event) => handleChange(event)}
            autoFocus
          ></textarea>
          <input
            type="text"
            className="form-control mb-2"
            placeholder="Option1"
            onChange={(event) => handleChange(event)}
            name="option1"
            value={options.option1}
          />
          <input
            type="text"
            className="form-control mb-2"
            placeholder="Option2"
            onChange={(event) => handleChange(event)}
            name="option2"
            value={options.option2}
          />
          <input
            type="text"
            className="form-control mb-2"
            placeholder="Option3"
            onChange={(event) => handleChange(event)}
            name="option3"
            value={options.option3}
          />
          <input
            type="text"
            className="form-control mb-2"
            placeholder="Option4"
            onChange={(event) => handleChange(event)}
            name="option4"
            value={options.option4}
          />
          <button type="submit" onClick={onSubmit} className="btn Submitbtn">
            Submit
          </button>
        </form>
      </div>
    </div>
  );
};

export default AddPoll;

当我使用 POSTMAN 时，它工作正常！这是我的邮递员形象

所以我不明白该怎么做，用我的反应表单代码，任何人都可以帮我....！

解决方法

尝试在 question 函数中分隔 option 和 handleChange 值。

const handleChange = event => {
  if (event.target.name === 'question') {
    setValue({ ...value,[event.target.name]: event.target.value });
  } else {
    const newOption = {
      ...value.option,[event.target.name]: event.target.value
    };
    setValue({ ...value,option: newOption });
  }
};

,

试试这个：

  const [value,setValue] = useState({
    question: "",option: [ option1: "",option2: "",option3: "",option4: "" ],error: "",loading: "false",getRedirect: false,formData: "",});

 


const onSubmit = (event) => {
    event.preventDefault();
    setValue({ ...value,loading: true });
    // console.log(handel);
    createaPoll(user._id,token,{ question,option }).then((data) => {
      if (data.error) {
        setValue({ ...value,error: data.error });
      } else {
        setValue({
          ...value,question: "",option: ["hello","hi","hey"],});
      }
    });
  };