Javascript 点击按钮将一个不同的组件加载到当前组件中时，NextJSReactJS中的问题

在NextJS中，我有3个组件"侧边栏"、"编织"和"工具页"，各自的代码附在下面.

ToolsPage:个

"use client"
import Woven from './components/weaved';
import Sidebar from './sidebar';
import { useState } from 'react';

const ToolsPage = () => {
  const [selectedTool, setSelectedTool] = useState('');

  const handleToolClick = (tool: string) => {
    setSelectedTool(tool);
  };

  const renderToolComponent = () => {
    if (selectedTool === 'weaviate') {
      console.log("inside render")
      return <Woven />;
    }
    return <></>;
  };

  return (
    <>
      <Sidebar onToolClick={handleToolClick} />
      <div>
        {selectedTool ? (
          // Render the selected tool component
          <>
            <div>{selectedTool}</div>
            {renderToolComponent()}
          </>
        ) : (
          <></>
        )}
      </div>
    </>
  );
};

export default ToolsPage;

Woven tool component:个

"use client"

import { useState } from "react"

const Woven = async () => {
const [weaveApiKey,setWeaveApiKey] = useState('')
const [weaveURL,setWeaveURL] = useState('')

return(
    <>
    <form>
    <label>
          Weaviate API key:
          <input
            type="text"
            value={weaveApiKey}
            onChange={(e) => setWeaveApiKey(e.target.value)}
          />
        </label>
        <br/>
        <label>
          Weaviate Cluster URL:
          <input
            type="text"
            value={weaveURL}
            onChange={(e) => setWeaveURL(e.target.value)}
          />
        </label>
        <br/>
        </form>
        </>
)}

export default Woven

Sidebar component:个

"use client"

type SidebarProps = {
  onToolClick: (tool: string) => void;
};

const Sidebar: React.FC<SidebarProps> = ({ onToolClick }) => {
  const toolNames = ['weaviate']; // Add other tool names as needed

  return (
    <div>
      <h2>Tools</h2>
        {toolNames.map((tool,index) => (
          <button key= {index} onClick={() => onToolClick(tool)}>
            {tool}
          </button>
        ))}
    </div>
  );
};

export default Sidebar;

Here I hardcoded only one tool called "weaviate" This is the sample output screen if I click on the weaviate button (The component did not appear):

我在这里的主要目的是在单击weaviate按钮时将编织组件加载到Tools页面中，如图所示.

在这里，代码成功地进入renderComponent()函数(如在工具页面组件中使用控制台日志(log)语句所示，但它连续重复多次，并且屏幕受到冲击)

但在单击硬编码的编织按钮后，编织组件不会出现.

我try 了另一种情况--我在Tools第7行中直接将状态设置为"weaviate"

const [selectedTool, setSelectedTool] = useState('weaviate');

然后出现该组件:

但在单击该按钮时也会出现同样的问题.

最终目标:在点击按钮时，应该加载编织组件，而不需要多次重新渲染