Question

我有以下代码块：

const UserNotification = ({ user }) => {
  const url = `https://api.thingspeak.com/channels/${user.channel}/feeds.json?&dynamic=true`;
  console.log(url); //https://api.thingspeak.com/channels/594944/feeds.json?&dynamic=true OK
  return <UserNoti url = { url } />
}

class UserNoti extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
      isLoaded: false,
    };
  }

  componentDidMount() {
   fetch(url)
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          items: json,
        });
      });
  }
 render() {...}}

但是，我得到以下行的'url' is not defined no-undef：fetch(url)中的componentDidMount()。如何在componentDidMount方法内调用url变量？

Answer 1

使用this.props.url来访问传递给url类的UserNoti属性。

componentDidMount() {
   fetch(this.props.url)
      .then(res => res.json())
      .then(json => {
        this.setState({
          isLoaded: true,
          items: json,
       });
   });
}

Answer 2

在UserNotification中，您将url作为组件道具传递。使用ES6类组件，可以使用this.props.propName访问道具。因此，就您而言，您应该这样做：

componentDidMount() {
  fetch(this.props.url)
    .then(res => res.json())
    .then(json => {
      this.setState({
        isLoaded: true,
        items: json,
      });
    });
}

有关Components and Props的官方React文档的更多信息。

使用Reactjs未定义componentDidMount内部的变量

2 个答案: