Как остановить экран от повторного рендеринга события onChange?

Question

У меня есть страница, состоящая из раскрывающегося списка и диаграммы, раскрывающийся список получает элементы с сервера, всякий раз, когда пользователь выбирает что-либо из раскрывающегося списка, которое вызывает событие handleSelectionChange (), которое обновляет текущий выбор в локальном состоянии, весь MetricList() выполняется снова,

В приведенном ниже коде "console.log (" TESTING ") будет продолжать регистрироваться каждый раз, когда я делаю выбор в раскрывающемся списке.

Что мне делатькогда я выбираю что-то в выпадающем списке, это только меняет локальное состояние?

const MetricList = () => {
  ///get the list of metrics for dropdown
  FetchMetricList(); 

  //get dropdown data from the redux store.
  const { getMetrics } = useSelector(getMetric);

  //craete local state called metricSelected
  const [metricSelected, setGreeting] = useState([]);

  //loading spinner if no data arrives
  if (!getMetrics) return <CircularProgress />;

  //create dropdown data using Data from getMetrics
  let data = [];
    getMetrics.forEach(value => {
      let obj = { key: value, text: value, value: value };
      data.push(obj);
    });

  // FOR TESTING PURPOSE
  console.log("TESTING")

  //when user make selection in dropdown, update local state
  const handleSelectionChange = (event, { value }) => {
    setGreeting( [value] );
  };

  return (
    <div>
      <Dropdown
        placeholder="Select..."
        fluid
        multiple
        selection
        data={data}
        style={{ width: "500px" }}
        onChange={handleSelectionChange}
      />
      <Charts
        dataSelected={metricsSelected}
      />
    </div>
  );
};
```

Answer 1

То, что вы описываете, - это как работает реакция. Если состояние в вашем компоненте изменится, он будет повторно визуализировать этот компонент. Прямо сейчас каждый раз, когда состояние в вашем компоненте MetricList изменяет, компонент MetricList будет перерисовываться.

Что вы хотите, чтобы что-то в вашем компоненте было выполнено только при начальном рендеринге?

Если это так, вам нужно использовать что-то вроде useEffect ловушки и визуализировать его только при первоначальном рендеринге или использовать компонент на основе классов и запустить его в componentDidMount() или componentWillMount().

Так, например, если вы хотите, чтобы FetchMetricList() запускался только один раз при начальном рендере, вы можете сделать что-то вроде следующего:

useEffect(() => {
  FetchMetricList()
}, []);

или в компоненте на основе классов вы можете назвать его так:

componentDidMount(){
  FetchMetricList();
}

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

Надеюсь, я понял, что вы хотели. Я был немного смущен вашим вопросом, потому что описание вашей проблемы (повторная визуализация компонента при изменении состояния) - это базовая функциональность того, как реагирует. Если я неправильно понял, пожалуйста, дайте мне знать в комментариях ниже.