javascript array.include не работает правильно в реакции

Question

Прежде всего, я новичок во внешнем интерфейсе, поэтому мои знания о javascript + реагируют на учебные пособия.

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

То есть внутри компонента, либо в функции, либо в методе рендеринга, если записывается console.log(object.property)

Распечатывает массив без ошибок.

Но если я попытаюсь использовать метод .include

console.log (object.property.includes ( "строка"))

выдает следующую ошибку:

react-dom.development.js? Cada: 12404 Uncaught TypeError: Невозможно прочитать свойство «включает» неопределенное

так, как массив превращается в неопределенный только для использования этого метода?

Обходной путь, который я нашел, выглядит примерно так:

   render() {
    let self = this;
    let user;
    return(
      {
        this.props.otherarray.map(function(var) {
            self.user = self.props.object.property.includes("string") 
        })
        console.log(this.user)
      }
    );
   }

и тогда это работает.

Чего мне не хватает? Это что-то про контекст JavaScript или что-то вроде реакции?

Answer 1

console.log вывод вводит вас в заблуждение. Я предполагаю, что object исходит от асинхронного задания, и вы видите массив в первом рендере как undefined, а второй рендер как есть. Быть undefined не проблема, но если вы попытаетесь использовать метод для несуществующего свойства, такого как map, includes будет проблемой, и вы получите ошибку, процитированную в вашем вопросе. Итак, вам нужно проверить наличие этого свойства. Я не знаю настройки вашего компонента, но вот пример:

const object = {
  property: [ "foo", "bar", "baz" ]
}

const fakeRequest = () => new Promise( resolve =>
  setTimeout(() => resolve(object),1000)
);

class App extends React.Component {
  state = {
    object: {},
  }
  componentDidMount() {
    fakeRequest().then(this.setState({object}))
  }
  render() {
    const { object } = this.state;
    object.property && console.log(object.property.includes("foo"))
    return <div>Foo</div>;
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>