Ошибка при передаче данных между компонентами - PullRequest
Новая
       51

Ошибка при передаче данных между компонентами

1 голос
/ 26 июня 2019

Я пытаюсь передать значение из одного компонента - Counters.jsx в Counter.jsx. Когда я захожу в консоль разработчика и делаю журнал, я могу получить данные из: this.props.value, но когда я пытаюсь установить их в состояние, я получаю следующую ошибку: TypeError: Невозможно прочитать свойство 'value' неопределенного. 

// This is the component: Counters

import React, { Component } from "react";
import Counter from "./counter";

class Counters extends Component {
  state = {
    counters: [
  { id: 1, value: 4 },
  { id: 2, value: 0 },
  { id: 3, value: 0 },
  { id: 4, value: 0 }
  ]
};

render() {
return (
  <div>
    {this.state.counters.map(counter => (
      <Counter key={counter.id} value={counter.value} selected={true} />
    ))}
  </div>
);
}
}



// This is the component: Counter

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: this.props.value
  };

Проблема в классе Counter, когда я устанавливаю состояние - Count в this.props.value. Однако это значение доступно, если я делаю console.log (this.props.value).

Я получаю эту ошибку: Uncaught TypeError: Невозможно прочитать свойство 'значение' из неопределенного

Кто-нибудь знает, пропустил ли я что-то и почему я могу получить к нему доступ через console.log, но не могу установить для счетчика состояний this.props.value?

Ответы [ 5 ]

0 голосов
/ 26 июня 2019

Измените свой код компонента на это: 

import React, { Component } from "react";

class Counter extends Component {
  constructor(props){
    super(props);
    this.state = {
      count: this.props.value
    };
  };

Вы пытаетесь использовать this без предоставления ему правильного контекста. Измените свой код, как я предложил, и он должен работать просто отлично. Надеюсь, это поможет !!

0 голосов
/ 26 июня 2019

Вероятно, вы пропустили передачу реквизитов в конструктор super.

constructor(props) { 
  super(props); 
  this.state = { count:this.props.value, }; 
}

Вы не можете использовать this.props в конструкторе, не передав его в super.

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

Я предлагаю вам использовать реквизиты по умолчанию для такого случая.

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

0 голосов
/ 26 июня 2019

Установите его в конструкторе: 

constructor(props) {
    super(props);
    this.state = {
      count: props.value,
    };
}
0 голосов
/ 26 июня 2019

Необходимо установить значения по умолчанию в конструкторе и обновить состояние в методе componentDidUpdate. 

constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
}

componentDidUpdate(prevProps, prevState) {
   this.setState({count : this.props.value });
}
0 голосов
/ 26 июня 2019

Вам приходится иметь дело со случаями, когда по какой-то причине нет props.value. 

class Counter extends Component {
  state = {
    count: this.props.value || 0,
  };
...
}

В вашем случае, я думаю, вам не нужно использовать другое значение state. Лучше использовать переменную props напрямую, чем переменную state.

...