React bootstrap-handleSelect 上的下拉值不会改变答案

【问题标题】：React bootstrap - Dropdown value doesnt change on handleSelectReact bootstrap-handleSelect 上的下拉值不会改变
【发布时间】：2021-08-05 23:05:49
【问题描述】：

选择在页面上呈现正确数据后更改下拉标题时出现问题。

我以下拉列表中的选定选项作为道具登陆此页面。但是，当我尝试从下拉列表中更改其他选项时，它会返回到道具中的选定选项。

但是，如果我直接进入此页面，则下拉菜单中的第一个选项被选中，并且也无法更改。


import React, { useContext, useState, useEffect } from 'react';
import { Content } from './Content.jsx';
import { Dropdown, DropdownButton } from 'react-bootstrap';
import { DataContext } from './ContextProvider/DataContext.jsx';
import { useTracker } from 'meteor/react-meteor-data';

export const Feature = props => {
  const [isLoading, setIsLoading] = useState(true);
  const [selectedElement, setSelectedElement] = useState('');

  const { sortedData } = useContext(DataContext);

  useEffect(() => {
    if (sortedData.length == 0) {
      setIsLoading(true);
    } else {
      setIsLoading(false);

      props.location.aboutProps == undefined || selectedElement == ''
        ? setSelectedElement(sortedData[0].name)
        : setSelectedElement(props.location.aboutProps.dataName);
    }
  }, [sortedData, props]);

  const handleSelect = e => {
    setSelectedElement(e);
  };

  if (isLoading) {
    return (
      <section>
        <p> Loading</p>
      </section>
    );
  }

  return (
    <div className="App">
      <DropdownButton
        id="dropdown-basic-button"
        variant="info"
        className="floatRight"
        onSelect={handleSelect}
        title={selectedElement || sortedData[0].name}
      >
        {sortedData.map((value, i) => {
          return (
            <Dropdown.Item key={i} eventKey={value.name}>
              {value.name}
            </Dropdown.Item>
          );
        })}
      </DropdownButton>
          <div>
            <Content dataName={selectedElement} />;
          </div>
    </div>
  );
};

export default Feature;

【问题讨论】：

标签： javascript reactjs dropdown react-bootstrap

【解决方案1】：

通过将其与旧名称进行比较，我自己修复了它。如果没有名称，则仅更新状态。

const [oldName, setOldName] = useState('');
if (oldName == '') {
        props.location.aboutProps == undefined || selectedElement == ''
          ? setSelectedElement(sortedData[0].name)
          : setSelectedElement(props.location.aboutProps.dataName);
        setOldName(selectedElement);
      }

【讨论】：