在React中调用两个onClick函数，函数独立工作，但同时调用时则不同

Question

我有一个带有按钮的导航，每个按钮代表一个类别。单击按钮时，从父文件作为 prop 传递到 nav 组件的 setActive 函数会触发渲染不同的类别组件。这部分代码按预期工作。

在导航组件中，我还希望按钮在单击时显示

如果我将一个或另一个函数传递给 onClick，则代码可以工作，但同时，本地 setActiveButton 函数会在首次单击按钮时将状态重新设置为“null”，并且仅在两次单击后显示

import { useState } from "react";

const DisciplineNav = ({ setActive }) => {

  const [activeButton, setActiveButton] = useState(null);

  const handleButtonClick = (button) => {
    setActiveButton(button);
    console.log(button);
    console.log(activeButton);
  };

  const svgElement = (
    <svg
      ...
    </svg>
  );

  return (
    <nav>
      <button
        onClick={() => {
          handleButtonClick("Button1");
          setActive("Button1");
        }}
      >
        {activeButton === "Button1" ? (
          svgElement
        ) : (
          <img
            src="https://cdn..."
          />
        )}
        <br />
        <span>Button1</span>
      </button>
      <button
        onClick={() => {
          handleButtonClick("Button2");
          setActive("Button2");
        }}
      >
        {activeButton === "Button2" ? (
          svgElement
        ) : (
          <img
            src="https://cdn..."
          />
        )}
        <br />
        <span>Button2</span>
      </button>
    </nav>
  );
};

export default DisciplineNav;

这是父组件：

import { useState, useEffect } from "react";
import React from "react";
import env from "react-dotenv";
import axios from "axios";
import Button1 from "../../Components/ParentComponent/Button1.js"
import Button2 from "../../Components/ParentComponent/Button2.js"
import DisciplineNav from "../../Components/Discipline-Nav/DisciplineNav.js";

export const ParentComponent = () => {
  const [button1Data, setButton1Data] = useState([]);
  const [button2Data, setButton2Data] = useState([]);
  const [active, setActive] = useState("button1");
  
  useEffect(() => {
    axios
      .get(
        `...=json&key=${env.API_KEY}`
      )
      .then((response) => {
        console.log(response.data);
        setButton1Data(response.data.values);
      });
  }, []);

  useEffect(() => {
    axios
      .get(
        `...=json&key=${env.API_KEY}`
      )
      .then((response) => {
        console.log(response.data);
        setButton2Data(response.data.values);  
      });
  }, []);

  const ParentComponent = () => (
    <div>
      <div className={cls["title"]}>ParentComponent</div>
      <DisciplineNav setActive={setActive}/>
      <div>
        {active === "Button1" && <Button1 button1Data={button1Data}></Button1>}
        {active === "Button2" && <Button2 button2Data={button2Data}></Button2>}
      </div>
    </div>
  );

  return (
    <>
      <ParentComponent />
    </>
  )
}

export default ParentComponent;

当我控制台记录按钮时，它始终是我刚刚单击的按钮的名称，如预期的那样。但是，当我控制台记录 activeButton 时，它会在第一次单击时记录先前单击的按钮，在第二次单击时记录 null，最后在第三次单击时记录正在单击的按钮。虽然由于某种原因，当 activeButton 为“null”时，第二次单击时会渲染 svg，但我不明白，因为条件渲染应该仅在 activeButton === 刚刚单击的按钮时显示 svg。我相信这个问题可能与如何反应异步渲染状态有关，但我无法确定如何解决这个问题。

任何帮助将不胜感激！

Answer 1

上面的代码在组件

（也称为 ParentComponent）中定义了 ParentComponent ，然后渲染

<ParentComponent>

。

组件是一个 JavaScript 函数。 当组件“渲染”时，您只需运行该 JavaScript 函数即可。

您已经在函数 (

B()

) 内定义了一个函数（我们称之为

A()

）。每次运行

A()

时，它都会 重新创建

B()

。这与之前的运行不一样

B()

。

用 React 术语来说：你已经在组件

<B>

的代码中定义了一个组件 <A> 。每次

<A>

渲染时，您都会获得一个名为 <B> 的 新组件。

不要在组件内部定义组件。 99.47% 的情况下您不会对结果感到满意。