javascript - 如何使用 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>
    )
}

标签： javascriptreactjs

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>
  );
}