如何使用 onClick 事件渲染一些 JSX？

Question

因此，當用戶按下按鈕時，我嘗試渲染一些 JSX，我嘗試通過 onClick 執行此操作，但它不起作用，JSX 不會在屏幕上渲染。 有沒有辦法做到這一點？ 我的代碼是這樣的：

function RandomScreen() {
    async function HandleClick() {
        // make API post request
        .then(function(response) {
            return (<h1>{response.data}</h1>)
        })
    }
    return (
        <button onClick={HandleClick}>Click me</button>
    )
}

Answer 1

我想你正在尋找這樣的東西：

function RandomScreen() {
  const [data, setData] = useState(null);
  async function HandleClick() {
    fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then((response) => response.json())
      .then((json) => {
        console.log(json);

        setData(json);
      });
  }
  return (
    <button onClick={HandleClick}>
      Click me
      {data && <h1>{JSON.stringify(data, null, 2)}</h1>}
    </button>
  );
}

Answer 2

例如，將您的數據存儲在 state

const [data, setData] = React.useState();


...
.then(function(response) {
    setData(response.data);
 })

在 JSX 中你可以處理顯示部分：

{data && <h1>{data}</h1>}