Question

React：TypeError：无法读取未定义的属性“Item”

2019-03-20

5684

javascript reactjs ecmascript-6

我想在新的 state prop 中访问 state/property 的值。实际上，我已经有了 state 属性，其中存储了 Item=5 的值，并且创建了 UrlParam，其中存储了 URL，但我需要 URL 属性中的 Item 数值。我是 React 新手，有人可以帮我吗？

当我收到错误 TypeError: Cannot read property 'Item' of undefined 时，有人可以帮帮我吗？

代码

 this.state={
  Item : 5,
  skip:0,
  urlParams:`http://localhost:8001/meetups?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
}

Answer 1

正如另一个答案所提到的，您似乎试图在赋值表达式 this.state={... } 完成之前使用 this.state.Item 。

也就是说，您似乎希望 urlParams 始终与 Item 和 skip 的新值保持同步。如果是这种情况，您可能希望将其实现为辅助函数，而不是 state 的属性。

class Example extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      Item: 5,
      skip: 0
    }
    
    this.handleClick = this.handleClick.bind(this);
  }

  urlParams() {
    return `http://localhost:8001/parties?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`
  }
  
  handleClick() {
    this.setState({skip: this.state.skip + 1})
  }

  render() {
    return (
      <div>
        <a href={this.urlParams()}>Example link</a>
        <pre>{this.urlParams()}</pre>
        <button onClick={this.handleClick}>Change link</button>
      </div>
    )
  }
}

    
ReactDOM.render(<Example/>, document.querySelector('div#my-example' ))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="my-example"></div>

Answer 2

当插入 urlParams 的值时， this.state 尚未定义。

请将 Item 和 skip 定义为单独的变量，或者随后设置 this.state.urlParams ：

const Item = 5;
const skip = 0;
 this.state={
  Item,
  skip,
  urlParams:`http://localhost:8001/parties?filter[limit]=${(Item)}&&filter[skip]=${skip}`
}

或

 this.state={
  Item : 5,
  skip:0
};
  this.state.urlParams = `http://localhost:8001/parties?filter[limit]=${(this.state.Item)}&&filter[skip]=${this.state.skip}`;