@Mixa

Почему глючит if/else?

Изучаю React по самоучителю. С помощью него выстроился такой код:

const myNews = [
  {
    id: 1,
    author: 'Новость 1',
    text: 'В четверг, четвертого числа...'
  },
  {
    id: 2,
    author: 'Новость 2',
    text: 'Считаю, что $ должен стоить 35 рублей!'
  },
  {
    id: 3,
    author: 'Новость 3',
    text: 'Прошло 2 года с прошлых учебников, а $ так и не стоит 35'
  },
  {
    id: 4,
    author: 'Новость 4',
    text: 'Бесплатно. Без смс, про реакт, заходи'
  },
];


class News extends React.Component {
  render() {
    const { novyna } = this.props
    let newsTemplate

    if (novyna.length) {
      newsTemplate = novyna.map(function(item) {
        return (
          <div key={item.id}>
            <p className="news__author">{item.author}:</p>
            <p className="news__text">{item.text}</p>
            <hr/>
          </div>
        )
      })
    } else {
      newsTemplate = <p>Нет</p>
    }

    return (
      <div className="news">
        {newsTemplate}
        <strong>Всего новостей: {novyna.length}</strong>
      </div>
    )
  }
}


const Comments = () => {
  return <p>Нет новостей, нечего комментировать</p>
}


const App = () => {
  return (
    <React.Fragment>
      <News news={myNews} />
      <Comments />
    </React.Fragment>
  )
}



ReactDOM.render(<App />, document.getElementById('root'));

Так вот в данному случае if(novyna.lenght) в условиях запускает вариант, когда новостей нет, хотя подсчет количества работает правильно.

Также в процессе экспериментов было установлено, что если написать в условии вообще какую-либо фигню, типа if(novyna.lenght=55), то новости выводятся как ни в чем не бывало.

Почему так и где моя ошибка?
  • Вопрос задан
  • 384 просмотра
Решения вопроса 2
rockon404
@rockon404 Куратор тега React
Frontend Developer

Так вот в данному случае if(novyna.lenght) в условиях запускает вариант, когда новостей нет, хотя подстчет количества работает правильно.

www.google.ru/search?q=length
Ответ написан
Комментировать
0xD34F
@0xD34F Куратор тега React
if (novyna.lenght) {

Что ещё за "lenght"? Я такого слова не знаю. Есть "length".

в процессе экспериментов было установлено, что если написать в условии вообще какую-либо фигню, типа if(novyna.lenght=55), то новости выводятся как ни в чем не бывало

Предлагаю разобраться, чем присваивание отличается от проверки на равенство.

class News extends React.Component {

У этого компонента нет причин быть классом:

const News = ({ news }) =>
  <div className="news">
    {Array.isArray(news) && news.length
      ? news.map(n => (
          <div key={n.id}>
            <p className="news__author">{n.author}:</p>
            <p className="news__text">{n.text}</p>
            <hr/>
          </div>
        ))
      : <p>Нет</p>}
    <strong>Всего новостей: {news.length}</strong>
  </div>;
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@harutyunyan
Условие всегда заносите в return, т.к. вы просто убивайте компонент если не дай бог условие вернет null или undefined
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 18:16
1000 руб./за проект
28 мар. 2024, в 18:15
90000 руб./за проект
28 мар. 2024, в 18:05
5000 руб./за проект