映射对象数组不正确在React?

Question

我不明白为什么所有的定义都显示在屏幕上。我的目标是显示所有4个按钮(术语)，并且只显示该术语的定义。就像现在它一直显示所有的定义一样??我访问数据的方式有问题吗?有多个对象在SlideData数组，我只显示一个，因为它是唯一一个与条款。

const SlideData = [
{
index: 7,
title: "Key Terms (1 of 3)",
content: [
{
type: "terms",
terms: [
{
name: "Business Intelligence",
definition:
"definition 1",
},
{
name: "DCPS",
definition:
"definition 2",
},
{
name: "Civilian Personnel System:",
definition:
"definition 3",
},
{
name: "Defense: ",
definition: " definition 4",
},
],
},
],
},
];
export default SlideData;

const TextSlide = (props) => {
//STATE MANAGEMENT//
const [clickedTerm, setClickedTerm] = useState(0);
const [showClicked, setShowClicked] = useState(true);
//CHANGE STATE//
const handleClick = (i) => {
console.log(i);
setClickedTerm(i);
setShowClicked(true);
};
//paragraph
function Paragraph({ text }) {
return <p>{text}</p>;
}

//TERMS RENDER
function Terms({ title, terms }) {
return (
<>
{title && <p>{title}</p>}
{terms.map((item, index) => (
<div">
<div">
{showClicked && (
<div>
<h3>{terms[clickedTerm].name}</h3>
<div>{terms[clickedTerm].definition}</div>
</div>
)}
</div>
<button key={index} onClick={() => handleClick(index)}>
{item.name}
</button>
</div>
))}
</>
);
}

const elements = {
paragraph: Paragraph,
terms: Terms,
};
return (
<>
<div className="slide">
<div className="standard-grid">
<span className="slide-title title">{props.title}</span>
<div className="content">
{props.content.map((item, i) => {
const Comp = elements[item.type];
return <Comp key={i} {...item} />;
})}
</div>
</div>
</div>
</>
);
};

export default TextSlide;

Answer 1

您正在map()回调中呈现定义div。

试试这个:

function Terms({ title, terms }) {
return (
<>
{title && <p>{title}</p>}
<div>
{showClicked && (
<div>
<h3>{terms[clickedTerm].name}</h3>
<div>{terms[clickedTerm].definition}</div>
</div>
)}
</div>
{terms.map((item, index) => (
<div>
<button key={index} onClick={() => handleClick(index)}>
{item.name}
</button>
</div>
))}
</>
);
}

顺便说一句，使用索引作为键通常是不好的做法。在这种情况下，我用item.name。key也需要放在最上面的元素，所以div而不是button。