Как передать значения объекта детям в ReactJS - PullRequest
Новая
       40

Как передать значения объекта детям в ReactJS

0 голосов
/ 08 июля 2020

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

Я новичок в React JS и, вероятно, мне здесь не хватает чего-то простого.

Цель этого состоит в том, чтобы иметь выбранный список «Отрасли», который передает выбранную отрасль в выбранный список «Категории». Выбранная категория затем заполнит таблицу.

Я получаю сообщение об ошибке, что this.props.selectedIndustry не существует при компиляции.

Вот мой код: 

    class CategoryFilter extends React.Component {
    
      constructor(props) {
        super(props);
        this.state = {
          industrySelect: this.props.selectedIndustry
        }
        console.log(this.props.selectedIndustry)
      }
    
      render() {
  
        const { selectedCategory } = this.state;
        const categories = utmcategories.filter(function(i) {return i.industry==this.props.selectedIndustry})

        return (
          <Select options={categories} onChange={this.handleCategoryChange}
          />
        );
      }
    
    class IndustryFilter extends React.Component {
    
      state = {
        selectedIndustry: null,
      };
    
      handleIndustryChange = (selectedIndustry) => {
        this.setState({ selectedIndustry });
        console.log(`Option selected:`, selectedIndustry);
      }
    
      render() {
    
        const { selectedIndustry } = this.state;    
        const industries = utmindustries;
    
        return (
          <div>
            <Select options={industries} 
            onChange={this.handleIndustryChange}
            autoFocus={true}
            />
            <CategoryFilter selectedIndustry={selectedIndustry}/>
          </div>
        );
      }
    }

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

function CategoryFilter(props) {
  return (
    <div>
      {props.filteredIndustry}
    </div>
  )
}

Но все равно получил ошибку:

"Objects are not valid as a React Child."

1 Ответ

1 голос
/ 09 июля 2020

Вы инициализируете selectedIndustry до null здесь: 

state = {
    selectedIndustry: null,
  };

, а затем передаете его как опору <CategoryFilter>

Я получаю сообщение об ошибке что this.props.selectedIndustry не существует при компиляции. Вот мой код

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

Я ожидаю, что this.props.selectedIndustry будет определен как null после того, как <CatergoryFilter> будет смонтирован. Вы должны попробовать инициализировать его значением, например, «Default Industry» и посмотреть, печатает ли этот console.log(this.props.selectedIndustry) в конструкторе «Default Industry». Если нет, то я подозреваю, что контекст this не был инициализирован до тех пор, пока конструктор не вернется. Попробуйте вместо этого записать это значение в метод render ().

...