從 array.map 中獲取單個項目

Question

我通過一些 context.api 數據進行映射，並在頁面上顯示該數據。 這工作正常。 但是，當我想將那個 array.map 的一部分發送回狀態管理的上下文時，它只選擇最后一項。 我希望它選擇您單擊的項目。

代碼：

import { React, useState, useEffect, useContext } from "react";
import { DataContext } from "../contexts/dataContext";
import { Link } from "react-router-dom";

const Example = () => {

    const [open, setOpen] = useState(false);
    const [input, setInput] = useState(null);
    const[designation, setDesignation] = useState(null);
    const { data } = useContext(DataContext);
    const { onChange } = useContext(DataContext);
    const { onClick} = useContext(DataContext);

    return(
        <div className="container">
            <div className="row">
                <div className="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6 offset-sm-3 offset-md-3 offset-lg-3 offset-xl-3 offset-xxl-3 min-vh-100 text-center p-5 border">
                    {
                        data.map((item) => {
                            return(
                                <div className='row' key={item.id}>
                                    <div className='col-xs-12 placeholder placeholder_image rounded'></div>
                                    <div className='col-xs-12 text-start p-0 pt-2 m-0'>
                                        <h2>{item.title}</h2>
                                        <p>
                                            <div className='col-sm-11'>
                                                <a className="no_underline link-dark" data-bs-toggle="collapse" href={item.dataTarget} role="button" aria-expanded="false" aria-controls="collapseExample">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam venenatis sapien...<i className="bi bi-caret-down-fill"></i></a>
                                            </div>
                                        </p>
                                            <div className="collapse" id={item.dataId}>
                                                <div>
                                                    <p>{item.text}</p>
                                                </div>
                                                <form>
                                                    <div className='row mt-2 mb-2'>
                                                        <div className='d-grid gap-2 col-8 mx-auto'>
                                                            <div className="form-floating text-start">
                                                                <input type="text" className="form-control" id="enterAmount" placeholder='Enter Amount' aria-describedby="enterAmount" onChange={e => {setInput(e.target.value);onChange(e.target.value);}} />
                                                                <label htmlFor="enterAmount">Enter Amount</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div className='row mt-2 mb-2'>
                                                        <div className='d-grid gap-2 col-6 mx-auto'>
                                                            <Link to="/checkout"  className="btn btn-lg button-color"  onClick={ onClick(item.title) }>Give <i className="bi bi-arrow-right"></i></Link>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                    </div>
                                </div>
                            )
                        }) 
                    }
                </div>
            </div>
        </div>
    )
}

export default Example

這是我用來獲取數據的部分：

<Link to="/checkout"  className="btn btn-lg button-color"  onClick={ onClick(item.title) }>Give <i className="bi bi-arrow-right"></i></Link>

我的上下文 api 中的 onClick 函數如下所示：

    const[designation, setDesignation] = useState(null);

它真的只是一個 setState 函數。

那么為什么每次設置時，它都會返回 3 項數組中的第三個標題？

Answer 1

將鏈接上的 onClick 事件更改為此。

<Link to="/checkout" className="btn btn-lg button-color" onClick={() =>onClick(item.title) }>Give <i className="bi bi-arrow-right"></i></Link> – 

Answer 2

onClick接受一個函數，但您將調用函數的值傳遞給它。

該函數在每次迭代時都會被調用，它每次都會更新狀態，並最終在最后一項的onClick調用中確定狀態。

嘗試這個：

onClick={() => onClick(item.name)}