我可以打亂陣列并映射它。我的應用程式正確顯示了混洗后的資料（用于滑塊效果的 translate3d）。但是，我得到一個不斷增長的控制臺警告串列：
“遇到兩個具有相同密鑰的孩子，“13”。密鑰應該是唯一的，以便組件在更新期間保持其身份。非唯一密鑰可能會導致孩子被復制和/或省略 - 該行為不受支持，并且可能會在未來的版本。”
應該如何撰寫來處理警告？
.wrapper{
position: relative;
width: 100%;
height: 86.5vh;
overflow: hidden;
}
.slider{
display: flex;
width: 100vw;
height: 89vh;
}
.slides{
display: flex;
width: 4000vw;
height: 88.75vh;
transition: ease 1000ms;
}
.slide{
width: 100vw;
height: 89vh;
object-fit: fill;
}
.wrapperTest{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 55%;
transition: ease-out 1000ms;
}
.sliderTest{
display: flex;
align-items: center;
justify-content: center;
height: 35vh;
}
.slidesTest{
display: flex;
align-items: center;
justify-content: center;
width: 4000vw;
height: 35vh;
}
.slideWrapper{
display: flex;
align-items: center;
justify-content: center;
width: 100vw;
}
.slideContent{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 92vw;
height: 28vh;
border-radius: 22px;
background-color: rgba(0,0,0,.55);
}
.testimoneyWrapper{
display: flex;
align-items: top;
justify-content: space-between;
overflow: hidden;
}
.leftQuote{
font-size: 7.5vw;
margin: 0px 0px 0px 8px;
color: white;
}
.rightQuote{
font-size: 7.5vw;
margin: 0px 8px 0px 0px;
color: white;
}
.slideTestimoneyWrapper{
display: flex;
align-items: center;
justify-content: center;
}
.slideTestimoney{
display: flex;
width: 90%;
margin: 10px 0px 6px 0px;
font-size: 3.2vw;
font-family: 'PT Sans', sans-serif;
text-align: center;
color: white;
}
.slideInfos{
display: flex;
align-items: center;
justify-content: center;
font-size: 2.8vw;
font-family: 'PT Sans';
font-weight: 500;
color: white;
}
.slideName{
margin-right: 40px;
}
.slideInfo{
display: flex;
align-items: center;
justify-content: center;
}
.slideInfo1{
color: #0099CC;
}
.slideInfo2{
color: #EA4335;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
const scrollImages = [
{
id: 1,
img: photo1,
},
{
id: 2,
img: photo2,
},
{
id: 3,
img: photo3,
},
]
const HomeScroll = () => {
function shuffleArray(array) {
var i, j, temp;
for (i = array.length -1; i > 0; i--) {
j = Math.floor(Math.random() * i);
temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
const [id, setId] = useState(0)
const delay = 10000;
useEffect(() => {
shuffleArray(scrollTestimonials)
setTimeout(() =>
setId((prevIndex) =>
prevIndex === scrollImages.length - 1 ? 0 : prevIndex 1
),
delay
);
return () => {};
}, [id]);
return (
<div className="wrapper">
<div className="slider">
<div className="slides"
style={{ transform: `translate3d(${-id * 2.5}%, 0, 0)` }}
>
{scrollImages?.map((item) => (
<div className="widthWide" key={item.id}>
<img className="slide" src={item.img} key={item.id} alt="Slide" />
</div>
))}
<div className="wrapperTest">
<div className="sliderTest">
<div className="slidesTest">
{scrollTestimonials?.map((item) => (
<div className="slideWrapper" key={item.id} >
<div className="slideContent" key={item.id} >
<div className="testimoneyWrapper" key={item.id} >
<FontAwesomeIcon icon={faQuoteLeft} className="leftQuote" key={item.id} />
<div className="slideTestimoneyWrapper">
<p className="slideTestimoney" key={item.id}>{item.text}</p>
</div>
<FontAwesomeIcon icon={faQuoteRight} className="rightQuote" key={item.id} />
</div>
<div className="slideInfos" key={item.id} >
<p className="slideName" key={item.id}>{item.name}</p>
<div className="slideInfo" key={item.id}>
{item.site === "Yelp" ?
<>
<FontAwesomeIcon icon={faYelp} size="2x" color="#0099CC" key={item.id} />
<p className="slideInfo1" key={item.id}>Yelp</p>
</>
:
<>
<FontAwesomeIcon icon={faGoogle} size="1x" color="#EA4335" key={item.id} />
<p className="slideInfo2" key={item.id}>oogle</p>
</>
}
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
)
}uj5u.com熱心網友回復：
在 JS 中，你可以使用 Lodash 的庫，它有一個函式.shuffle(collection). 然后使用洗牌資料作為您的視圖模型。
uj5u.com熱心網友回復：
你可以嘗試像這樣洗牌你的陣列：
function shuffleArray(array) {
return array.sort(function () {
return Math.random() - 0.5;
});
}
編輯：您還應該在洗牌后創建一個新的物件/陣列。否則 React 不會檢測到任何變化。
編輯 2：稍微改進了 shuffle 函式的實作：
function shuffleArray(array) {
const newArray = [ ...array ];
for (let i = newArray.length - 1; i > 0; --i) {
const j = Math.floor(Math.random() * i);
const temp = newArray[i];
newArray[i] = newArray[j];
newArray[j] = temp;
}
return newArray;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/411653.html
標籤：