javascript array.includes在反应中不起作用

Question

首先，我是前端的新手，所以我对javascript +反应的知识是基于教程的。

我有一个设置为组件属性的对象。该对象具有一个数组作为属性。

所以在组件内部，无论是在函数还是在渲染方法中，如果写一个console.log(object.property)

它打印数组，没有错误。

但是，如果我尝试使用.includes方法

的console.log（object.property.includes（ “字符串”））

它会引发以下错误：

react-dom.development.js？cada：12404 Uncaught TypeError：无法读取未定义的属性'includes'

那么为了使用这个方法，数组如何变成未定义？

我发现的解决方法是这样的：

   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>