Необходимые реквизиты и проверки существования

Я вижу, что мой код ломается, хотя список реквизитов требуется.
Итак, должен ли я проверить наличие списка, прежде чем сопоставлять его, как я делаю ниже?

class Cart extends React.Component {
  render() {
    const { list } = this.props
    return { list && list.map(e => <div> {e} </div>) }
  }
}

Cart.propTypes = {
  list: PropTypes.array.isRequired
}

Обновление:

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

Есть ли смысл, хотя оба имеют isrequired и установить значение по умолчанию?
Разве не подразумевается, что если значение требуется, то оно должно существовать всегда?

Но компонент, кажется, монтируется, хотя некоторые необходимые реквизиты не удовлетворены.

Так что я думаю, что установка значения по умолчанию имеет смысл, но так isRequire - это только флаг для разработчика, не более того, правильно?

5 4
javascript reactjs react-proptypes

5 ответов:

Да, я думаю, что вы должны. Другие разработчики все еще могут явно передать null в list prop.

<Cart list={null}/>

Или ... более реальный пример: 

// getListFromServer() <-- can return null
<Cart list={getListFromServer()}/>
1

Вы должны использовать PropTypes, который импортируется из prop-types: 

import PropTypes from 'prop-types'

Cart.propTypes = {
  list: PropTypes.array.isRequired
}

Итак, должен ли я проверить наличие списка, прежде чем сопоставлять его, как я делаю ниже?

Return { list & & list.карта (e => {e} ) }

Да, вы должны проверить его. Потому что до тех пор, пока ваш компонент не будет отрисован, список может быть неопределенным или нулевым. А использование map на undefined или null выдаст вам ошибку. Когда ваш компонент получает данные списка, то ваше использование карты будет правильным использование.

Было бы даже лучше проверить его длину: 

return { list && list.length && list.map(e => <div> {e} </div>) }

Я бы также предложил вам использовать defaultProps: 

Cart.defaultProps = {
  list: [] // or list: ['my','default','props']
}

Если вы используете реквизит по умолчанию, то вам не нужно беспокоиться о его проверке перед использованием map. Это обеспечит вам отображение на массиве.

Но что делать, если пользователь передает реквизиты, отличные от массива?

Даже в этом случае пользователь получает уведомление через PropTypes.array.isRequired. Так что проверка list Перед использованием map в данном случае не нужна.

1

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

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

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

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

Я бы делал нулевые проверки при выполнении некоторых побочных эффектов, например, при вызове Ajax, когда я не могу реально контролировать результат.

В конце концов, вам нужно сделать проверку типов/значений в вашей программе, Вопрос в том, где вы это делаете, везде или где это имеет значение.

1

Не могли бы вы опубликовать код, в котором вы передаете список компоненту cart.

Если ничего не работает, вы всегда можете попробовать это 

Cart.defaultProps = {
     list: []
}

Хотя я бы предложил исправить основную проблему, из-за которой происходит сбой кода, не могли бы вы также предоставить журнал ошибок.

0

Да, вы должны проверить, есть ли у него массив или нет, потому что ваш компонент корзины хочет, чтобы список всегда был массивом, и список не должен быть пустым массивом, и только тогда сделать карту или сделать эту проверку в Родительском компоненте перед передачей реквизитов списка в корзину, так что вам не нужно снова проверять в компоненте корзины, вы можете непосредственно сделать карту

    class Cart extends React.Component {

         render() {
            const { list } = this.props; //should be inside render
             return (list && list.length>0 && list.map(e => <div> {e} </div>) 
          }
      }

Лучше сохранить список в виде пустого массива в Родительском компоненте, например: this.state={list: []}, так что вам не нужно проверять, является ли он неопределенным или нулевой. Вы можете просто проверить длину массива и сделать map

0