英文:
Getting value as undefined
问题
在ReactJs中，我在useEffect中从数据库中获取值并将它们存储在一个名为images的状态中。然后，在映射这些值时，我将"sno"值赋予每个按钮。现在，当我点击垃圾桶按钮时，我打印出按钮的值。根据期望，我应该始终获得准确的"sno"值，但有时会打印出未定义(undefined)。
问题的原因可能在于你使用了images.shift()来删除数组的第一个元素。这会导致数组中的第一个元素被移除，从而改变了所有后续元素的索引。如果你在删除第一个元素后尝试访问pic.SNO，它可能会导致问题，因为pic对象中不再具有sno属性。
解决方法是不要使用images.shift()来删除第一个元素，或者在删除元素后确保你的代码逻辑不依赖于数组元素的索引位置。
另外，你可以在处理删除操作时添加一些额外的错误处理来捕获可能导致未定义值打印的情况，以帮助调试和解决问题。
英文:
I'm using ReactJs. In useEffect I'm fetching the values from the database and storing them in an images state.
While mapping these values I'm giving the 'sno' value to each button. Now when I click on the trash button I'm printing the value of the button. As per the expectations, I should get the exact sno value always but sometimes undefined is getting printed.
import React, { useState, useEffect } from "react";
import './addphotos.css';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrash } from "@fortawesome/free-solid-svg-icons";
import { faCheck } from "@fortawesome/free-solid-svg-icons";
import AdditionTemplate from "./AdditionTemplate";
import Instance from "../Axios/Instance";
const AddPhotos = () => {
const [images, setImages] = useState([]);
useEffect(() => {
fetchImages();
}, []);
async function fetchImages() {
const result = await Instance.get('/photos/getImages');
setImages(result.data);
}
images.shift();
console.log(images);
const handleDelete = async (e) => {
console.log(e.target.value);
}
return (
<React.Fragment>
<div className="grid mt-5 w-75">
{
images.map((pic) => {
return (
<ul key={pic.SNO}>
<img src={`http://localhost:1200/Images/getImages/${pic.NAME}`} alt={`${pic.PIC_NAME}`}
/>
<div className="row">
<div className="col">
<button value={pic.SNO} className="btn text-danger" onClick = {(e)=>handleDelete(e)}>
<FontAwesomeIcon icon={faTrash} />
</button>
</div>
</div>
</ul>
)
})
}
<div>
<AdditionTemplate />
</div>
</div>
</React.Fragment>
)
}
export default AddPhotos;
What is the exact problem? If possible please explain in detail.
答案1
得分: 0
更新handleDelete如下：
const handleDelete = async (sno) => {
console.log(sno); // 直接访问`sno`的值
}
并更新<button>如下：
<button
className="btn text-danger"
onClick={() => handleDelete(pic.SNO)} // 将`pic.SNO`作为参数传递
>
<FontAwesomeIcon icon={faTrash} />
</button>
英文:
Update the handleDelete to the following:
const handleDelete = async (sno) => {
console.log(sno); // Accessing the `sno` value directly
}
and update the <button> to the following:
<button
className="btn text-danger"
onClick={() => handleDelete(pic.SNO)} // Pass `pic.SNO` as an argument
>
<FontAwesomeIcon icon={faTrash} />
</button>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论