如何使用函数 onclick 更新我的状态？

Question

我正在制作一个简单的石头剪刀布应用我有一个 'rock'、'paper' 和剪刀的数组，我正在映射它。但问题是，当我点击按钮时，它应该通过手柄点击功能更新状态，并且应该显示用户选择

这是我的应用组件：

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;

如何使用函数 onclick 更新我的状态？

how do i update my state using a function onclick?

reactjs

use-state