Почему я не могу получить доступ к свойствам объекта, полученного из props в ReactJS?

#javascript #reactjs #object #react-props

#javascript #reactjs #объект #реагировать-props

Вопрос:

Итак, у меня есть класс, который получает массив с двумя объектами в нем в качестве props.

Если я запишу это в консоль здесь, я увижу, что у меня есть полученное значение

Итак, значения здесь. После этого я пытаюсь получить только один из этих объектов, который мне нужен, в переменную «currentCar», как вы можете видеть. Это также работает, я получаю массив, содержащий только элемент.

Когда я пытаюсь отправить эту переменную «currentCar» в качестве prop в EditCarComponent, все меняется.

В моем EditCarComponent я могу это сделать, и это нормально:

Он отображает это:

Как и должно быть, я думаю. Но я, как только попытаюсь сделать что-то подобное:

Я получаю: «Ошибка типа: не удается прочитать свойство ‘carName’ неопределенного»

И я действительно не знаю, в чем проблема, и почему я не могу получить доступ к свойствам этого объекта, который ЯВНО существует??

1. в вашем первом примере вы говорите this.props.cars, а в другом вы объявляете его как props.car[0] не должно быть props.cars[0] ?

2. пожалуйста, поделитесь кодом в виде текста

3. Это не должно быть props.car[0], потому что я отправляю его этому компоненту как car = {currentCar}, а не cars = {currentCar} ?

4. возможно, данные недоступны в момент, когда вы пытаетесь их вызвать.

5. Но тогда почему console.log(props.car) работает и показывает объект, но console.log(props.car.carName) он не работает, он говорит, что объект не определен

Ответ №1:

Вы используете Array.filter вместо Array.find, filter возвращает все элементы в массиве, которые соответствуют условию в новом массиве, в то время как find предоставит вам первый элемент, соответствующий условию, поэтому, если вы хотите получить один результат, используйте Array.вместо этого найдите метод.

 const currentCar = this.props.cars.find((car) => car.carId === currentId)

1. Я сделал это, спасибо. Теперь мой «currentCar» на самом деле является только одним объектом, который я хотел, вместо массива. Но я все еще передаю его как car = {currentCar} другому компоненту, и когда я пытаюсь получить доступ к некоторым его свойствам с помощью props.car.carName , допустим, он говорит, что это не определено, как и раньше. Но просто props.car это не так, это весь объект

2. Так console.log(props.car) работает и показывает объект, но console.log(props.car.carName) он не работает, он говорит, что объект не определен

3. Можете ли вы опубликовать оба консольных журнала в вопросе, пожалуйста? Потому что у объекта может быть пустое поле, но я хочу перепроверить

4. Я думаю, что у вас есть идентификатор, которого нет в массиве, поэтому результат поиска возвращает undefined, удалите журнал консоли и попробуйте вернуть props.car amp;amp; (// ваш код jsx). Это гарантирует, что вы визуализируете компонент только в том случае, если автомобиль был найден

5. Я попытался console.log(currentCar) прямо перед отправкой его в качестве props другому компоненту, и у него есть значение. Это объект, возвращенный из find. Так что я действительно не думаю, что это проблема.