Question

我有一个页面，其中包含一个下拉列表和一个Chart，该下拉列表从服务器接收项目，每当用户从该下拉列表中选择一些东西时，就会触发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()中运行它。 / p>

例如，如果您只希望FetchMetricList()在初始渲染上运行一次，则可以执行以下操作：

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

或者在基于类的组件中，您可以这样称呼它：

componentDidMount(){
  FetchMetricList();
}

否则它将像现在正在发生的那样在每个渲染器上运行。不知道这是否是您不想在每个渲染器上运行的功能，但这只是一个示例。但这就是使用基于状态的组件系统的本质。每次组件状态更改时，都会重新渲染组件。

希望我了解你想要什么。我对您的问题感到有些困惑，因为对您的问题的描述（状态变化后组件的重新呈现）是反应工作原理的基本功能。如果我误解了，请在下面的评论中告诉我。

如何停止屏幕重新呈现onChange事件？

1 个答案: