[英]Get a single item from an array.map
我通过一些 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 项数组中的第三个标题?
将链接上的 onClick 事件更改为此。
<Link to="/checkout" className="btn btn-lg button-color" onClick={() =>onClick(item.title) }>Give <i className="bi bi-arrow-right"></i></Link> –
onClick
接受一个函数,但您将调用函数的值传递给它。
该函数在每次迭代时都会被调用,它每次都会更新状态,并最终在最后一项的onClick
调用中确定状态。
尝试这个:
onClick={() => onClick(item.name)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.