在 React 中错误地映射对象数组？

Question

我不明白为什么所有的定义都显示在屏幕上。我的目标是显示所有 4 个按钮（术语），并且只显示该术语的定义。就像现在一样，它一直显示所有定义？？关于我访问数据的方式？ SlideData 数组中有多个对象，我只显示一个，因为它是唯一一个带有 Terms 的对象。

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.

在 React 中错误地映射对象数组？

mapping an object array incorrectly in React?

javascript

arrays

reactjs

object

array.prototype.map