this.prop.state.location.url 未定义？ React Js 链接道具

Question

Component.js:

<Link to={{ pathname: 'audio-Player', state: { url: 'Demo' } }}> Play</Link>

If I click this Link then the AnitherComponent.js opens and works but if I open this AnitherComponent.js direct, then it says can not read property url at this.props.loaction.url

AnitherComponent.js:

componentDidMount() {
  this.state.song.src = this.props.loaction.url
  console.log(this.state.song)
  this.setState({
    play_img: document.querySelector('#play_img'),
    range: document.querySelector('#range1'),
  })
  const { song, range, play_img, total_time, currentTime } = this.state
}

Answer 1

You are trying to access loaction.url which doesn't exist. You can set a default value if it doesn't exist:

this.state.song.src = this.props.loaction?.url ?? "default value";

or

this.state.song.src = this.props.loaction && this.props.loaction.url || "default value";

PS you might need plugin for the optional chaining.

Answer 2

I tried this:

componentDidMount() {
  this.state.song.src = this.props.location.state.url
    ? this.props.location.state.url
    : ' sdxs'
  console.log(this.state.song)
  this.setState({
    play_img: document.querySelector('#play_img'),
    range: document.querySelector('#range1'),
  })
  const { song, range, play_img, total_time, currentTime } = this.state
}

But it is still not working.