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

Question

我无法切换特定按钮。我想在一个按钮数组中切换那个特定的按钮。这里是演示代码链接。请更正并分享解决后的问题。

代码

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设置为布尔值，而是将其设置为布尔数组。

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