如何在 reactjs 的选择下拉列表中显示来自 API 的枚举值？

Question

我想同时接收来自 3 个不同 API 的请求。我希望将请求返回的枚举值显示在选择选项上。然后用户将不得不从这些选项中进行选择。他选择的结果仍将发送到不同的 API。

 function getSeverity() {   
    return axios.get(`http://localhost:8080/enum/..`);
  }
  function getCategory() {  
    return axios.get(`http://localhost:8080/enum/..`);
  }
  function getStatus() { 
    return axios.get(`http://localhost:8080/enum/..`);
  }
  useEffect(() => {
    Promise.all([getSeverity(), getCategory(), getStatus()])
      .then(function (results) {
        const severity = results[0];
        const category = results[1];
        const status = results[2];
      });
  }, []);

return (
    <div className="container">
      <div className="w-75 mx-auto shadow p-5">
        <h2 className="text-center mb-4">Add A New Field</h2>
        <form onSubmit={e => onSubmit(e)}>      
          <div className="form-group">
            <label>
              Severity
            </label>
            <select defaultValue={severity}>
              {_.map(severity, (value, key) => (
                <option value={key} key={key}>{value}</option> ))}
            </select>
          </div>
          <div className="form-group">
            <label>
              Status
            </label>
            <input
              type="text"
              className="form-control form-control-lg"
              placeholder="Enter status"
              name="status"
              value={status}
              onChange={e => onInputChange(e)} />
          </div>
          <div className="form-group">
            <label>
              Category
            </label>
            <input
              type="text"
              className="form-control form-control-lg"
              placeholder="Enter category"
              name="category"
              value={category}
              onChange={e => onInputChange(e)}
            />
          </div>         
        </form>
      </div>
    </div>
  );
};

Answer 1

您可以使用 Object.keys 循环遍历对象键

您的循环将如下所示。

{Object.keys(severity).map(key => (
                <option value={key} key={key}>{serverity[key]}</option> ))}

您将获得一个数组中的键，并使用 .map 循环遍历它。