javascript - 如何使用内部有条件语句的映射函数迭代对象数组？

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 3 年前。

Improve this question

const images = [
 {
    url: 'https://source.unsplash.com/random/1000x671',
    text: 'hi'

  },
  {
    url: 'https://source.unsplash.com/random/1000x671',
    text: 'hello'
  },
]

const Test = () => {
  const [on, toggle] = useState(false);

  return (
    <div>
      {images.map((image, index) => (
        <div key={index} onClick={() => toggle(!on)}>
          {on && (
              {image.text}
          )}
          <img src={image.url} />
         </div>
      )}
    </div>
  )
};

export default Test;

我得到了正确渲染的 img url，但 img 文本仅显示数组中的第一个对象，唯一的区别似乎是因为它位于条件语句内？关于可能导致此问题的任何想法。谢谢大家!

Answer 1

您的 jsx 无效，您的帖子中是否存在代码中不存在的拼写错误(请注意，您有 3 个开头 <div> ，但只有 2 个结尾 </div> )？现在我只是假设这就是问题所在，尝试将其更改为:

<div>
  {images.map((image, index) => (
    <div key={index} onClick={() => toggle(!on)}>
      {on && <div>{image.text}</div> }
      <img src={image.url} />
    </div>
  )}
</div>