Блог

У меня возникли проблемы с пониманием, почему я не могу заставить изображения отображаться в моих компонентах. У меня есть логическое значение, которое указывает на загрузку, и массив, который заполняется асинхронно. Когда я заканчиваю, я устанавливаю логическое значение, и компонент повторно отображает. Теперь я хочу создать карту для каждого элемента в массиве и поместить в колоду карт (это из react-bootstrap, если это не было очевидно). Я могу сделать это с любым заданным логическим значением и массивом, но не с логическим значением и массивами, созданными с помощью React.useState … Почему это так и как я должен это исправить?

Я столкнулся с этой проблемой несколько часов назад и отследил ее источник до этого минимального рабочего примера, который все еще отражает то, что я пытаюсь сделать, но я не уверен, что делать дальше.

 function TestCard() {
  return (
    <Card>
      <Card.Img src="holder.js/200x200" />
    </Card>
  );
}
  

Я пытаюсь отобразить следующий компонент:

 function MainComponent() {
  const [boolState, setBoolState] = React.useState(false);
  const [arrayState, setArrayState] = React.useState([]);

  React.useEffect(() => {
    setTimeout(() => {
      setBoolState(true);
      setArrayState([1,2,3]);
    }, 2000);
  });

  return (
    <>
    {/* This works */}
    {
      true amp;amp;
      <CardDeck>
        {
          [1,2,3].map(_ => {
            return (
              <TestCard />
            );
          })
        }
      </CardDeck>
    }

    {/* This doesn't, why? */}
    {
      boolState amp;amp;
      <CardDeck>
        {
          arrayState.map(_ => {
            return (
              <TestCard />
            );
          })
        }
      </CardDeck>
    }

    </>
  );
}
  

Code sandbox