Как заставить повторно визуализировать весь компонент, когда переданный в реквизит изменен в реагирующем хуке? - PullRequest
Новая
       4

Как заставить повторно визуализировать весь компонент, когда переданный в реквизит изменен в реагирующем хуке?

0 голосов
/ 03 февраля 2020

Ниже приведена упрощенная версия моего кода.

  • У меня есть раскрывающийся список, который я могу выбрать пустым, автомобиль, корабль.
  • Когда значение раскрывающегося списка изменяется, в моем Test компоненте у меня есть useEffect для контроля прохода -in значение testValue.
  • Если значение передачи testValue изменилось, я хочу повторно отобразить весь компонент Test с testValue, имеющим последнее измененное значение.

В настоящее время не знаете, как этого добиться? 

import React, { useState, useEffect } from "react";

function Test({ testValue }) {
  useEffect(() => {
    console.log("force ENTIRE Test component re-render");
  }, [testValue]);

  return (
    <div>
      <div>other components</div>
      <div>test me: {testValue}</div>
      <div>other components</div>
    </div>
  );
}

function App() {
  const [optionState, setOptionState] = useState("");

  return (
    <div className="App">
      <select
        value={optionState}
        onChange={e => setOptionState(e.target.value)}
      >
        <option value="">please select</option>
        <option value="car">car</option>
        <option value="ship">ship</option>
      </select>
      <Test testValue={optionState} />
    </div>
  );
}

export default App;
...