Всякий раз, когда пользователь выбирает параметр и изменяет его, все предыдущие параметры сохраняются в Reactjs.

Question

У меня есть выпадающий список, и все работает с выпадающим списком, если пользователь не выберет опцию, а затем не изменит опцию. Если это произойдет, это даст мне все выбранные варианты, а не только окончательный вариант. Я не уверен, почему такое поведение существует. Я попытался изменить обработчики на onclick и так далее, но это не помогает ..

import "../App.css";
import React, { useState } from "react";
import { checkRef } from "./firebase";

function Interface() {
  const [choices, setChoices] = useState({
    selectValue: "Pick Reason",
    damageValue: "Pick Reason",
    submitted: true,
    default: "Pick Option",
    screen: 0,
    keys: 0,
    trackpad: 0,
    headphneJack: 0,
    battery: 0,
    other: 0
  });

  let handleCart = function(e) {
    return setChoices({ ...choices, selectValue: e.target.value });
  };

  let handleDamage = function(e) {
    if (e.target.value === "Broken Screen") {
      return setChoices({
        ...choices,

        screen: +1
      });
      //
    } else if (e.target.value === "Broken Keys") {
      return setChoices({
        ...choices,

        keys: +1
      });
    } else if(e.target.value === "Won't Charge"){
        return setChoices({
            ...choices,

            battery: +1
        })
    } else if(e.target.value === "Trackpad"){
        return setChoices({
            ...choices,

            trackpad: +1
        })
    }
    //

    //
    else {
      return setChoices({ ...choices, damageValue: e.target.value });
    }
  };

  let buttonSub = function(e) {
    e.preventDefault();
    const item = {
      reason: choices.damageValue,
      teacher: choices.selectValue,
      screen: choices.screen,
      keys: choices.keys,
      battery: choices.battery,
      trackpad: choices.trackpad
    };
    checkRef.push().set(item);
    setChoices({
      selectValue: "",
      damageValue: "",
      submitted: false,
      screen: 0,
      keys: 0,
      battery: 0,
      trackpad: 0
    });
  };

  return (
    <div className="App">
      <h1>Chromebook Deposit Form</h1>
      <form>
        <div className="form-group">
          <label>Choose what grade you're in</label>
          <select
            className="form-control w-50 "
            id="cart"
            onChange={handleCart}
            value={choices.selectValue}
          >
            <option>{choices.default}</option>
            <option>6th Grade</option>
            <option>7th Grade</option>
            <option>8th Grade</option>
          </select>
          <hr></hr>
          <label>Select Your Reason For deposit</label>
          <select
            className="form-control w-50 "
            id="cart"
            value={choices.damageValue}
            onChange={handleDamage}
          >
            <option>{choices.default}</option>
            <option>Broken Screen</option>
            <option>Broken Keys</option>
            <option>Won't Charge</option>
            <option>Trackpad</option>
            <option>Other</option>
          </select>

          <button className="button" onClick={buttonSub}>
            Submit Information
          </button>
        </div>
      </form>
    </div>
  );
}

export default Interface;

Answer 1

Это потому, что вы всегда возвращаете { ...choices } с другим значением. ...choices берет все из объекта choices и помещает его в новый возвращаемый вами объект.

Удалите их из своего кода и просто замените все значения на ноль, кроме того, которое вам нужно установить, или измените код на что-то более понятное, например, строковое значение, указывающее, какая опция выбрана.