React不改变本地状态下拉值

Question

我正在建立一个PO号输入系统，输入PO号、到期日和优先级。PO号和到期日都会被修改，但优先级却不会。

下面是组件代码。

import React, { useState, useContext, useEffect } from 'react';
import M from 'materialize-css';
import OrderContext from '../../context/order/orderContext';
import AlertContext from '../../context/alert/alertContext';

const POEntry = () => {
  const orderContext = useContext(OrderContext);
  const alertContext = useContext(AlertContext);
  const { submitPO } = orderContext;
  const { setAlert } = alertContext;

  const [newOrder, setNewOrder] = useState({
    poNum: '',
    dueDate: '',
    priority: '',
  });

  const { poNum, dueDate, priority } = newOrder;

  const onChange = (e) => {
    setNewOrder({
      ...newOrder,
      [e.target.name]: e.target.value,
    });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    if (poNum === '') {
      setAlert('Please fill in all fields', 'danger');
    } else {
      console.log(poNum);
      console.log(dueDate);
      submitPO({
        poNum,
        dueDate,
        priority,
      });
    }
  };

  useEffect(() => {
    M.AutoInit();
    // eslint-disable-next-line
  }, []);

  return (
    <div className="row">
      <form className="col s12" onSubmit={onSubmit}>
        <div className="row">
          <div className="col s12">
            <div className="input-field col s4">
              <i className="fas fa-archive prefix"></i>
              <label htmlFor="poNum">Enter PO Number...</label>
              <input
                id="poNum"
                name="poNum"
                type="text"
                value={poNum}
                onChange={onChange}
              />
            </div>
            <div className="input-field col s4">
              <i className="fas fa-calendar-day prefix"></i>
              <input
                id="dueDate"
                name="dueDate"
                type="date"
                value={dueDate}
                onChange={onChange}
              />
            </div>
            <div class="input-field col s4">
              <select value={priority} onChange={onChange}>
                <option value="low">Low Priority</option>
                <option value="norm">Normal Priority</option>
                <option value="high">High Priority</option>
              </select>
              <label>Priority Level</label>
            </div>
          </div>
        </div>
        <div className="col s12">
          <button className="btn btn-primary btn-block">Submit PO</button>
        </div>
      </form>
    </div>
  );
};

export default POEntry;

重申一下 poNum 和 dueDate 状态变量在状态中得到正确的改变，但当我选择一个 priority，它创建了一个新的状态值，标签为 : 而不是更新 priority 价值。

这可能是一些简单的东西，但我在我的智慧在这里。求助!

Answer 1

你缺少一个 name 属性的优先级选择。

你需要做的是：

<select value={priority} onChange={onChange} name="priority">
    <option value="low">Low Priority</option>
    <option value="norm">Normal Priority</option>
    <option value="high">High Priority</option>
</select>