地图内的切换按钮

Question

我正在尝试在地图中设置一个开关，它通过一个按钮激活，现在我处理了卡片的每一项之间的差异，但是有一个问题，因为状态改变了，我的意思是我不更新它，状态不允许我激活多个按钮，我尝试使初始状态成为一个对象数组，但我无法上传数组的一个位置... 这是代码：

处理程序

 //hooks 
    const [detail, setDetail] = useState([{
        id: '',
        state: false,

    }]);

    const handleClick = (e, id) => {
        setDetail({ ...detail, id: id, state: !detail['state'] })
    }

地图

<div className={Styles.wrapper}>
                {
                    artistSales && artistSales.map(s => {

                        return (
                            <div className={Styles.align}>
                                <div className={Styles.card}>
                                    <div className={Styles.order}>
                                        <h2>Numero de orden: {s.id_order}</h2>
                                        <p>Estado de pago: {s.state === 'fullfilled' && 'pago realizado'} </p>
                                        <p>Cliente: {s.userId.name} {s.userId.lastname} </p>
                                        <p>Email:
                                <a href={`mailto:${s.userId.email}`}>{s.userId.email}</a>
                                        </p>
                                    </div>
                                    <div className={Styles.detail}>
                                        <p>Total: ${s.total_price}</p>
                                        <p>Fecha: {s.createdAt.slice(0, 10)}</p>
                                        <button value={s.id_order} onClick={(e) => handleClick(e, s.id_order)} className={Styles.btn}>Ver detalles</button>
                                    </div>

                                </div>
                                {detail.id === s.id_order && detail.state === true && <div>
                                    hello
                                </div>}----> this is what should be displayed when you click the button

Answer 1

您需要先找到匹配的ID。如果有 none 你应该将它添加到数组中，否则从具有新状态值的匹配项中复制一份。

您还可以创建一个函数来检查给定的 id 是否有特定状态值来呈现您的内容逻辑：

const [details, setDetails] = useState([]);

const handleClick = (e, id) => {
  setDetails(details => {
    // find index for matching detail
    const detailIndex = details.findIndex(d => d.id === id)

    // no match return new state
    if (detailIndex === -1) {
      return [...details, { id, state: true }]
    }

    // with match create copy details
    const nextDetails = [...details]
    
    // create copy of detail with a flipped state value
    const state = !nextDetails[detailIndex].state
    nextDetails[detailIndex] = { ...nextDetails[detailIndex], state }

    return nextDetails
  })
}

// function to get artist detail state
const detailForArtist = ( id ) => {
  const detail = details.find(d => d.id === id)
  return detail?.state
}


{ detailForArtist(s.id_order) && <div>hello</div> }

地图内的切换按钮

Toggle button inside map

toggle

reactjs

react-hooks