我試圖從一組物件中找到一個物件。我正在使用 NextJs、React 17.0.2、typescript 4.5.4、framer-motion 和 tailwindcss。
這是陣列：
// rolls.js
const Rolls = [
{
titulo: "MERV 8",
rolls: [
{
medida: 16,
existencia: 15,
id: "MERV816"
},
{
medida: 20,
existencia: 25,
id: "MERV820"
},
{
medida: 24,
existencia: 12,
id: "MERV824"
},
{
medida: 25,
existencia: 10,
id: "MERV825"
}
]
},
{
titulo: "MERV 13",
rolls: [
{
medida: 16,
existencia: 15,
id: "MERV1316"
},
{
medida: 20,
existencia: 25,
id: "MERV1320"
},
{
medida: 24,
existencia: 12,
id: "MERV1324"
},
{
medida: 25,
existencia: 10,
id: "MERV1325"
}
]
}
];
export default Rolls;
這是組件：
// app.tsx
import "./styles.css";
import { useState } from "react";
import PageTitle from "./PageTitle";
import Rolls from "./rolls";
export default function App() {
const [selectedRoll, setSelectedRoll] = useState("none");
const [quantity, setQuantity] = useState(0);
const decreaseQuantity = () => {
if (quantity > 0) {
setQuantity(quantity - 1);
}
};
const increaseQuantity = () => {
if (quantity < 10) {
setQuantity(quantity 1);
}
};
const selectARoll = (e: any) => {
e.preventDefault();
setSelectedRoll(e.target.value);
};
return (
<main className={"p-4 font-mono"}>
<PageTitle title="Producción" />
<h2 className={"text-orange-400 font-bold text-2xl"}>Inventario</h2>
{Rolls.map((v, i) => {
return (
<section key={i} className="grid gap-4 md:grid-cols-6">
<h2 className="font-bold text-xl pt-4 md:col-span-6">
Eficiencia: {v.titulo}
</h2>
{v.rolls.map((v, i) => {
return (
<div
className="grid dark:border-white border-black border-2 rounded-md p-2 gap-2 "
key={i}
>
<div className="border-b-2 dark:border-white border-black flex justify-between">
<span>Medida:</span>
<span>{v.medida}</span>
</div>
<div className="border-b-2 dark:border-white border-black flex justify-between">
<span>Existencia:</span>
<span>{v.existencia}</span>
</div>
<div className="border-b-2 dark:border-white border-black flex justify-between">
<span>ID:</span>
<span>{v.id}</span>
</div>
<button
className="py-2"
onClick={selectARoll}
value={v.id}
whileHover={{ y: -3 }}
whileTap={{ y: 0 }}
>
select
</button>
</div>
);
})}
</section>
);
})}
<section className="py-4">
<h2 className={"text-orange-400 font-bold text-2xl"}>
Control de rollos
</h2>
<h3 className="py-4 font-bold text-2xl">
Selected roll: {selectedRoll}
</h3>
{/*
I would like to display all the object's information here.
Right now it's just a string.
*/}
{/*
This is an extra, but it would be nice to be able to modify the
existing quantity of rolls with these buttons. Maybe it is for
another question, please let me know.
*/}
<span>Quantity of rolls used today:</span>
<div className="flex py-4 gap-4">
<div className="md:w-1/4 w-full flex justify-between font-bold text-xl">
<button
className="border-2 dark:border-white border-black rounded-md px-2"
onClick={decreaseQuantity}
whileHover={{ y: -3 }}
whileTap={{ y: 0 }}
>
menos
</button>
<span>{quantity}</span>
<button
className="border-2 dark:border-white border-black rounded-md px-2"
onClick={increaseQuantity}
whileHover={{ y: -3 }}
whileTap={{ y: 0 }}
>
mas
</button>
</div>
<div className="w-1/4 flex content-center justify-center">
<button
className="border-2 dark:border-white border-black rounded-md px-2"
whileHover={{ y: -3 }}
whileTap={{ y: 0 }}
>
confirm
</button>
</div>
</div>
</section>
</main>
);
}
我的問題是，如何使 selectedRoll 成為所選物件的值？例如，如果我按下 id 為 MERV820 的物件按鈕，那么 selectedRoll 會回傳該物件的所有資料嗎？
請讓我知道您看到的任何其他錯誤或應該更好的東西，也許構造不同的 json，了解陣列，我不知道。指導表示贊賞。謝謝。
這是沙箱： https ://codesandbox.io/embed/zealous-alex-rqvy2?fontsize=14&hidenavigation=1&theme=dark
uj5u.com熱心網友回復：
您可以使用useEffect并呼叫以下函式getSelectedRollData來查找物件：
import { useState, useEffect } from "react";
useEffect(() => {
if(selectedRoll){
getSelectedRollData()
}
}, [selectedRoll])
const getSelectedRollData = () => {
let parentRollData = null;
let rollData = null;
console.log(Rolls)
for (let i = 0; i < Rolls.length; i = 1) {
for(let j=0; j<Rolls[i].rolls.length; j =1){
if (Rolls[i].rolls[j].id === selectedRoll){
parentRollData = Rolls[i];
rollData = Rolls[i].rolls[j]
break;
}
}
}
/// setState, return or console.log()
console.log(parentRollData);
console.log(rollData);
}
uj5u.com熱心網友回復：
我假設您想在單擊 Select 時傳入整個物件
我更改了呼叫selectARoll函式的位置并傳遞了整個物件
onClick={()=>selectARoll(v)}
然后我更改了selectARoll函式以接收物件
const selectARoll = (v:any) => {
setSelectedRoll(v);
};
現在您的狀態擁有整個物件，并且可以像selectedRoll.id等一樣訪問。
也許將您的初始狀態更改為類似
const [selectedRoll, setSelectedRoll] = useState({id:"none"});
PS無關。我沒有使用過打字稿，也不能說太多，但如果你使用打字稿，請避免使用any，因為它失去了使用打字稿的目的
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/412525.html
標籤：