如何使用 React 渲染 html 按鈕的新組件 onClick？

Question

I have a component that contains a html button that when clicked on needs to call a function that renders another component and sets the state of the new component to the arguement passed in to the function that returns the new component. 我設置了一個用字符串“start”初始化的 state 變量。 當單擊 html 按鈕時，state var 應該更改並且需要渲染新組件。 在我的應用程序中，頁面未加載，並且在我嘗試在代碼和框中制作的最小可重復示例中，state 變量甚至不會使用“開始”字符串進行初始化

import Member from "./member.js";
import { React, useState } from "react";

const Post = () => {
  const [start, setStart] = useState("start");

  const getProfile = (member) => {
    //    const addr = dispatch({ type: 'ADD_MEMBER', response: member })
    console.log(member);
    setStart(member)
    return <Member user={member}></Member>;
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => getProfile('ssssss')}>Profile</button>
    </div>
  );
};

export default Post;

這是我需要在點擊時呈現的組件

import { React, useState } from "react";
const Member = (props) => {
    const [user, setUser] = useState({});

    return (
      <div class="container">
lolololololololololololololo
      {this.user}
      </div>
    )
  }
  
  export default Member;

沙盒

Answer 1

你的代碼有很多問題。

1. 如評論中所述，您不能在功能組件之外使用鈎子。
2. 通過從getProfile function 返回一個組件，您沒有做任何事情，因為該組件沒有指定的渲染位置。
3. start變量在您的情況下是無用的，因為您不會在任何地方更改它。
4. 在您的Member 組件中，您使用的this.user在功能組件中是錯誤的。 這僅用於class 組件

您的代碼的某種工作版本可能是這樣的：

import Member from "./member.js";
import { React, useState } from "react";

const Post = () => {
  const [data, setData] = useState('');

  const getProfile = (member) => {
    //    const addr = dispatch({ type: 'ADD_MEMBER', response: member })
    setData(member);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => getProfile('Johny')}>Profile</button>
      {data && <Member user={data}></Member>}
    </div>
  );
};

export default Post;

import { React, useState } from "react";

const Member = (props) => {
  const [user, setUser] = useState(props.user);

  return (
    <div class="container">
      lolololololololololololololo
      {user}
    </div>
  );
};

export default Member;

本質上，當單擊按鈕時，值會發生變化並且不再是虛假的，因此會渲染成員組件並將值作為道具從數據變量中獲取。