我在一個組件中的資料映射是這樣的：
import React from "react" ;
import { useState } from "react";
import { useEffect } from "react";
import { get } from "lodash";
const Products = ({ data }) => {
return (
data.map( (item, index) => (
<div id={index}> /span>
<img src={item. img} /> <br />
{item.name} <br />
{get(moreData, `[${item.name.toLowerCase()}].info[0]})}.
{get(moreData, `[${item.name.toLowerCase()}].info[1]]}.
{get(moreData, `[${item.name.toLowerCase()}].info[2]')}
</div>
我希望能夠存盤這些資料：
我希望能夠存盤這些資料。
{item.name}
{get(moreData, `[${item.name.toLowerCase()}].info[0]`)}。
{get(moreData, `[${item.name.toLowerCase()}].info[1]`)}。
{get(moreData, `[${item.name.toLowerCase()}].info[2]`)} 在一個字串中，如string = {item.name},{moreData.item.name.toLowerCase().info[0]},.../etc
但是，你不能在組件內部宣告變數（據我所知，我還是第一次接觸這個）。
我已經試過.concat()--在每一行之后，以及.push()，用陣列而不是字串：
{item.name} < br />
{dataString.concat（item.name）}
{dataArr.push(item.name)} {push(item.name)
{get(moreData, `[${item.name.toLowerCase()}].info[0]`)}。
{get(moreData, `[${item.name.toLowerCase()}].info[1]`)}。
{get(moreData, `[${item.name.toLowerCase()}].info[2]`)}我本打算使用 DOM，但有人告訴我，在 react 中使用 DOM 是不好的做法。
const [dataString, setDataString] = useState("");
...
{item.name}。
{setDataString((dataString = item.name))}但似乎沒有什么能讓我如愿以償，我已經沒有想法了。
編輯：
我希望最終能夠將 "字串/文本 "復制到剪貼板。所以它可以被匯入到另一個網站。他們要求的格式是Item1, item1-info1, item1-info2, item1-info3, item2, item2-info1, item2-info2, item2-info3...等等
uj5u.com熱心網友回復：
這里有一個例子說明你如何在映射物件之外使用資料物件。 還有一個例子是如何將資料轉換成所需格式的字串。 因為我不知道你的資料物件的結構，我只是創建了一個，把這段代碼改成資料結構吧
const data = [
{
name: "name1",
info1: "info1-1",
info2: "info1-2",
info3: "info1-3"。
},
{
name: "name2",
info1: "info2-1",
info2: "info2-2",
info3: "info2-3"。
},
{
name: "name3",
info1: "info3-1",
info2: "info3-2",
info3: "info3-3"。
},
];
把這個函式改成適合你需要的函式。
const getStringOfData=（data）=> {
let stringArray = [] 。
data.map((item) =>/span> {
stringArray.push（item.name）。
stringArray.push（item.info1）。
stringArray.push（item.info2）。
stringArray.push（item.info3）。
});
let stringResult = stringArray.join(",")。
return stringResult。
};
useEffect(() =>/span> {
console.log("onMounte with useEffect"/span>)。
let stringResult = getStringOfData（data）。
console.log（stringResult）。
}, []);
你也可以根據你的要求在onClick函式上呼叫這個函式，資料物件在你的組件中幾乎無處不在
。uj5u.com熱心網友回復：
繼續我們在評論中的討論，看起來有兩個不同的事情你想在這里做：
我建議將這兩種行為分開，因為它們在邏輯上完全不相關。
首先，請將您組件中的資訊按照您的需要進行調整。
const Product = （{ item, index }） => {
//做任何你需要做的資訊。
///正確顯示它。
const identifier = name.toLowerCase()
const infos = (moreData[identifier] & & moreData[identifier].info) || {}
return (
<div>/span>
{ info[0] && <p> info[0] </p> }
{ info[1] && <p>info[1] </p>}。
{ info[1] && <p> info[2] </p>] p> ]
</div>>
)
}
const Products = ({ data }) => {
const onClick = useCallback(
async ( ) => {
///決議資料并使用單獨的拷貝。
//util method.。
const dataToString = /* 實際實作格式化為字串表示 */
copyTextToClipBoard(dataToString)
},
[資料]
)
return (
<div>
<button onClick={onClick} />
<div>
data.map((item, index) => (
< 產品 item={item} index={index} key={item. id} />
))
</div>)
</div>)
)
};
現在這將是你的用戶界面，copyToClipboard方法，有點像一個黑客，看起來是這樣的：
。
const copyTextToClipBoard = （text）=> {
const element = document.createElement（'textarea'）。
element.style = { display: 'none' }; // eslint-disable-line
element.value = text;
document.body.appendChild（element）。
element.select()。
document.execCommand('copy'/span>)。
document.body.removeChild（element）。
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/334277.html
標籤：