javascript - 如何在 react 中动态添加项目？

Question

你能告诉我如何在 react 中动态添加项目吗？

我正在从服务器获取响应(名称、标签等)。例如，我只是模拟我的响应，两秒后我获取该响应。

在我的示例中，我有两个选择框或下拉菜单。第一个下拉菜单的值为“one”和“two”(在 json 中作为选项给出)。

在 json 中还有一个选项 dependentField 这意味着该字段依赖于另一个字段(提到的值是依赖的)。在我的示例中，second 字段依赖于第一个字段字段。

因此，如果第一个选择框或下拉列表值 ID one，则第二个选择或下拉字段的值将为 ["三", "四"]。

因此，如果第一个选择框或下拉列表值 ID two，则第二个选择或下拉字段的值将为 ["four", "six"]。

所以我需要观察字段的值，如 Hook 表单中提到的

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