如何使用 onclick 函數更新我的狀態？

Question

我正在制作一個簡單的石頭剪刀布應用程序，我有一組“石頭”、“紙”和“剪刀”，我正在繪制它。 但問題是，當我單擊按鈕時，它應該通過句柄單擊功能更新狀態並顯示用戶選擇

這是我的應用程序組件：

import { useState } from "react";

const App = () => {
  const [userChoice, setuserChoice] = useState(null);
  const choices = ["rock", "paper", "scissors"];
  const handleClick = (value) => {
    console.log('hi');
    setuserChoice(value);
  };
  return (
    <div>
      <h1>Userchoice is:</h1>
      <h1>compute choice is :</h1>
      <>
      {choices.map(choice  => <button key={choice} onClick={()=>handleClick(choice)}>{choice}</button>)}
      
      </>


    </div>
  );
};

export default App;

這是我的 index.js：

 import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

我在使用地圖渲染列表時遇到了麻煩，為此我將地圖函數包裝在一個片段中，我不知道如何做出反應，所以我不確定。 我想要的是當有人點擊搖滾按鈕時，它應該更新狀態並顯示搖滾作為用戶選擇。

Answer 1

一切都剛剛好，你只是忘了渲染 userChoice 狀態。

import { useState } from 'react';

const App = () => {
const [userChoice, setuserChoice] = useState(null);
const choices = ['rock', 'paper', 'scissors'];
const handleClick = (value) => {
    console.log('hi');
    setuserChoice(value);
};
return (
    <div>
        <h1>Userchoice is: {userChoice}</h1>
        <h1>compute choice is :</h1>
        <>
            {choices.map((choice) => (
                <button key={choice} onClick={() => handleClick(choice)}>
                    {choice}
                </button>
            ))}
        </>
    </div>
);
};

export default App;