reactjs - 使用 React Hooks 显示下拉值选择选项

Question

我正在尝试使用 React Hooks 中的 useEffect 从下拉选择中获取startVisit值。

但我不想在endVisit下拉列表中显示 select startVisit值。

我该如何处理？我能怎么做？

代码：

  const [endVisitOptions, setEndVisitOptions] = useState(!startVisit);

  useEffect(() => {
    console.log("1",startVisit);  
    console.log("2",visits);  

    for(let x in startVisit)
    {
      console.log(startVisit[x]);      
    }

//your code logic here

    setEndVisitOptions(endVisitOptions);
  }, [startVisit]);





                <Dropdown
                    __key="visitId"
                    __value="title"
                    clearable={false}
                    label="Start Visit"
                    onChange={handleRecurringFormChange}
                    options={visits}
                    property="startVisit"
                    value={startVisit}
                  />
                </div>
              </div>
              <div className="columns">
                <div className="column">
                  <Dropdown
                    __key="visitId"
                    __value="title"
                    clearable={false}
                    label="End Visit"
                    onChange={handleRecurringFormChange}
                    options={endVisitOptions}
                    property="endVisit"
                    value={endVisit}
                  />

输出数据：

下拉 UI 数据：

标签： reactjsreact-hooks

Answer 1

您可能希望在调用 setEndVisitOptions 之前过滤访问以不包含 startVisit。

if (startVisit) {     
  const filteredData = visits.filter(v => v.visitId !== startVisit.visitId);
  setEndVisitOptions(filteredData)
}