Блог

Возникли проблемы с изменением раскрывающегося заголовка после выбора для отображения нужных данных на странице.

Я попадаю на эту страницу с выбранной опцией выпадающего списка в качестве опоры. Но когда я пытаюсь изменить другие параметры из выпадающего списка, он возвращается к выбранному варианту из реквизита.

Но если я напрямую перейду на эту страницу, будет выбран первый вариант из выпадающего списка, и я также не смогу его изменить.

 
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;
 

Исправил это самостоятельно, сравнив его со старым именем. ЕСЛИ имени нет, то обновите только состояние.

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