Реактивный ввод переворачивается каждый раз, когда я нажимаю на следующий ввод

Question

У меня есть два выпадающих ввода. У меня есть некоторые необъяснимые проблемы с ними как бы то ни было. Когда я нажимаю на верхний вход и выбираю его, он работает как положено, пока не выберу нижний вход. Как только я выбираю опцию из нижнего выбора, верхний вход сбрасывает значение до «выбрать опцию». Я не уверен, как изменить это поведение. Спасибо за помощь.

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({ selectValue: e.target.value });
  };

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

        selectValue: choices.selectValue,
        damageValue: e.target.value,
        submitted: true,
        default: "Pick Option",
        keys: 0,
        trackpad: 0,
        headphneJack: 0,
        battery: 0,
        other: 0,
        screen: +1
      });
      //
    } else if (e.target.value === "Broken Keys") {
      return setChoices({
        selectValue: choices.selectValue,
        damageValue: e.target.value,
    submitted: true,
    default: "Pick Option",
    screen: 0,
    keys: +1,
    trackpad: 0,
    headphneJack: 0,
    battery: 0,
    other: 0


      });
    } else if(e.target.value === "Won't Charge"){
        return setChoices({
            selectValue: choices.selectValue,
            damageValue: e.target.value,
            submitted: true,
            default: "Pick Option",
            screen: 0,
            keys: 0,
            trackpad: 0,
            headphneJack: 0,
            battery: +1,
            other: 0
        })
    } else if(e.target.value === "Trackpad"){
        return setChoices({
            selectValue: choices.selectValue,
            damageValue: e.target.value,
            submitted: true,
            default: "Pick Option",
            screen: 0,
            keys: 0,
            trackpad: +1,
            headphneJack: 0,
            battery: 0,
            other: 0
        })
    }
    //

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

  let buttonSub = function(e) {
    e.preventDefault();
    const item = {

      reason: choices.damageValue,
      grade: choices.selectValue,
      screen: choices.screen,
      keys: choices.keys,
      battery: choices.battery,
      trackpad: choices.trackpad
    };
    checkRef.push().set(item);
    setChoices({
    damageValue: 'hi',
      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.damageValue}
          >
            <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

Проблема в значении, которое вы устанавливаете для первого выпадающего списка в jsx. Он назначен для DamageValue, но когда вы обрабатываете выделение в этом выпадающем меню, вы устанавливаете selectValue. Это нормально, пока урон не изменяется, поэтому проблемы начинаются, когда вы меняете второй выпадающий список, который также меняет урон. Это должно исправить вашу проблему:

....
<select
  className="form-control w-50 "
  id="cart"
  onChange={handleCart}
  value={choices.selectValue}
>
...