在 React 中映射数据并想要切换特定按钮

Question

我无法切换特定按钮。我想切换按钮数组中的那个特定按钮。这里是demo codelink。请更正并分享已解决的问题。

代码

import { useState } from 'react';
import { data } from './data';
import "./styles.css";

export default function App() {
  const [state, setState] = useState({
    toggle: true,
    index: ''
  })

  const onJoin = () => {
    setState({
      ...state,
      toggle: !state.toggle
    })
  }

  const onRequest = () => {
    setState({
      ...state,
      toggle: !state.toggle
    })
  }
  return (
    <div className="App">
      {data.map(data => {
        return(<div className='container'>
          <h1>{data.name}</h1>
          {state.toggle ?
          <button onClick={() => onJoin()}>Join</button>
          :
          <button onClick={() => onRequest()} >Request</button>
        }
        </div>)
      })}
    </div>
  );
}

Answer 1

问题

您正在为所有按钮使用一个状态变量。您需要一个数组来跟踪哪些按钮被切换

解决方案

与其将 toggle 设为布尔值，不如将其设为布尔值数组。

Working Codesandbox

代码

import { useState } from "react";
import { data } from "./data";
import "./styles.css";

export default function App() {
  const [state, setState] = useState({
    toggle: [],
    index: ""
  });

  const onJoin = (index) => {
    setState((state) => ({
      ...state,
      toggle: state.toggle.filter((t) => t !== index)
    }));
  };

  const onRequest = (index) => {
    setState((state) => ({
      ...state,
      toggle: [...state.toggle, index]
    }));
  };
  return (
    <div className="App">
      {data.map((d, index) => (
        <div key={index} className="container">
          <h1>{d.name}</h1>
          {state.toggle.includes(index) ? (
            <button onClick={() => onJoin(index)}>Join</button>
          ) : (
            <button onClick={() => onRequest(index)}>Request</button>
          )}
        </div>
      ))}
    </div>
  );
}

在 React 中映射数据并想要切换特定按钮

Maping data in React and want toggle specific button

javascript

reactjs

use-state

代码

问题

解决方案

Working Codesandbox

代码