Как динамически добавлять элементы в select в React?

Question

Не могли бы вы рассказать мне, как динамически добавлять элементы в select в реакции?

Я получаю ответ от сервера (имя, метка и т. Д.). Например, я просто имитирую свой ответ и через две секунды получаю его.

В моем примере у меня есть два поля выбора или раскрывающегося списка. Первый раскрывающийся список имеет значения "один" и "два" (которые указаны как параметры в json).

В json есть еще один вариант dependentField это означает, что поле зависит от другого поля (указанное значение зависит). В моем примере second поле зависит от первого поля.

Таким образом, значение второго поля выбора или раскрывающегося списка будет ["three", "four"] если сначала выберите поле или идентификатор раскрывающегося значения one.

Таким образом, значение второго поля выбора или раскрывающегося списка будет ["five", "six"] если сначала выберите поле или идентификатор раскрывающегося значения two.

Так что мне нужно watch значение поля, указанное в hook form

https://react-hook-form.com/get-started

Можем ли мы динамически добавлять параметры

вот код

https://codesandbox.io/s/stoic-benz-lxb8i

useEffect(() => {
    console.log("====");
    (async () => {
      var a = await FETCH_API();
      console.log("sssss");
      setState(a);
      console.log(a);
    })();
  }, []);


const getForm = () => {
    try {
      return state.map((i, index) => {
        switch (i.type) {
          case "text":
            return (
              <div key={index}>
                <label>{i.label}</label>
                <input type="text" ref={register()} name={i.name} />
              </div>
            );

          case "select":
            if (i.watch) {
              watch(i.name, null);
            }
            return (
              <div key={index}>
                <label>{i.label}</label>
                <select name={i.name} ref={register()}>
                  {i.options.map((i, idx) => {
                    return (
                      <option key={idx} value={i}>
                        {i}
                      </option>
                    );
                  })}
                  /
                </select>
              </div>
            );
          default:
            return <div>ddd</div>;
        }
      });
      return <div>ddd</div>;
    } catch (e) {}
  };

Я не хочу выполнять аркоадинг, как

useEffect(()=>{


},[‘first’]) 

можем ли мы наблюдать или добавлять useeffect динамически, чтобы отслеживать изменения динамически?

Любое обновление

Answer 1

Это простой выбор из двух. Где первый выбор зависит от секунды

import React,{useState, useEffect} from "react"

const App = () => {

  const [state,setState] = useState({
    option1:["one","two"],
    option2: []
  })

  useEffect(()=> {
    (async () => {
      var a = await FETCH_API();
      console.log("sssss");
      setState({
        ...state,
        option2: a
      });
      console.log(a);
    })();
  },[state.option1])

  return(
    <div>
      <select>
        {
          state.option1.map((i,idx)=>{
            return(
              <option key={idx} value={i}>
              {i}
              </option>
            )
          })
        }

      </select>
      <select>
        {
          state.option2.map((i,idx)=>{
            return(
              <option key={idx} value={i}>
              {i}
              </option>
            )
          })
        }

      </select>
    </div>
  )
}

export default App