Javascript 如何在react（动态添加useEffect）中查看字段？

我试图查看一个字段，该字段具有

watch:true

字段。换句话说，我希望动态添加

useffect

。我有一个json（来自服务器）。我希望查看字段值（具有属性

watch:true

）。使用它的值，我希望更新其他字段值

这是我的密码

看到这个对象有

watch:true，

所以我需要观察或检查它的值是否改变

 {
     label: "First",
     name: "first",
     type: "select",
     remove: true,
     watch: true,
     options: ["", "one", "two"]
},

如果其值已更改，则调用此函数

const getSecondDropdownValue = function(value) {
    return new Promise((resolve, reject) => {
      if (value === "one") {
        setTimeout(function() {
          resolve(["three", "four"]);
        }, 1000);
      }

      if (value === "two") {
        setTimeout(function() {
          resolve(["five", "six"]);
        }, 1000);
      }
    });
  };

---

是否有任何更新？

检查项目是否具有

watch

属性，如果它确实将

getSecondDropdownValue

传递到选择选项的

onChange

事件。差不多

<select onChange={hasWatch ? getSecondDropdownValue : () => {}}>...</select>

getSecondDropdownValue函数

const getSecondDropdownValue = function(value, name) {
  const updated = data.find(
    item => item.dependentField && item.dependentField[0] === name
  );

  // return new Promise((resolve, reject) => {
  if (value === "one") {
    // setTimeout(function() {
    // resolve(["three", "four"]);
    // }, 1000);
    updated.options = ["three", "four"];
  }

  if (value === "two") {
    // setTimeout(function() {
    // resolve(["five", "six"]);
    // }, 1000);
    updated.options = ["five", "six"];
  }
  // });

  updateData(updateSelectData(data, updated));
};

范例

//获取一个钩子函数
const{useState}=React；
常数apiData=[
{
标签：“第一”，
名称：“第一”，
键入：“选择”，
手表：没错，
选项：[“”、“一”、“二”]
},
{
标签：“第二”，
姓名：“第二”，
选项：[]，
dependentField:[“第一”]，
类型：“选择”
}
];
//选项组件
常量选项=（{options，onChange，name}）=>
（选项。长度和(
onChange（e.target.value，name）}>
{Array.isArray（选项）&&
options.map（（选项，索引）=>(
{option}
))}
)) ||
虚假的；
函数App（）{
const[data，updateData]=useState（apiData）；
const updateSelectData=（列表，已更新）=>{
const index=list.findIndex（item=>item.name==updated.name）；
返回[
…list.slice（0，索引），
assign（{}，list[index]，updated），
…列表.切片（索引+1）
];
};
const getSecondDropdownValue=函数（值、名称）{
const updated=data.find(
item=>item.dependentField&&item.dependentField[0]==name
);
//返回新承诺（（解决、拒绝）=>{
如果（值=“一”）{
//setTimeout（函数（）{
//决心（[“三”，“四]）；
// }, 1000);
updated.options=[“三”、“四”]；
}
如果（值=“两”）{
//setTimeout（函数（）{
//决议（[“五”、“六”）；
// }, 1000);
updated.options=[“五”、“六”]；
}
// });
updateData（updateSelectData（数据，更新））；
};
返回(
{data.map（（选项，索引）=>(
{}}
选项={options.options}
/>
))}
);
}
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
);

如何呈现字段？使用
map
函数查看我的代码沙盒link@JuniusL. 你能帮帮我吗
// initial data from the api
const [data, updateData] = useState(apiData);

// update select options and the list
const updateSelectData = (list, updated) => {

    const index = list.findIndex(item => item.name === updated.name);
    return [
      ...list.slice(0, index),
      Object.assign({}, list[index], updated),
      ...list.slice(index + 1)
    ];
  };

const getSecondDropdownValue = function(value, name) {
  const updated = data.find(
    item => item.dependentField && item.dependentField[0] === name
  );

  // return new Promise((resolve, reject) => {
  if (value === "one") {
    // setTimeout(function() {
    // resolve(["three", "four"]);
    // }, 1000);
    updated.options = ["three", "four"];
  }

  if (value === "two") {
    // setTimeout(function() {
    // resolve(["five", "six"]);
    // }, 1000);
    updated.options = ["five", "six"];
  }
  // });

  updateData(updateSelectData(data, updated));
};