Question

我正在尝试根据用户点击的导航链接在我的网站上加载不同的结果。我已设置DRF以提供API端点。我正在使用React Router v4根据点击次数加载数据。这是我的代码，它有一个非常常见的问题。我在setState内使用componentDidUpdate。

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';
import axios from 'axios';


const Nav = () => (
  <Router>
    <div>
      <ul>
        <li><Link to='/'>All</Link></li>
        <li><Link to='/medicine'>Medicine</Link></li>
        <li><Link to='/capsules'>Capsules</Link></li>
      </ul>

      <hr/>

      <Route path='/:category?' component={Content}/>
    </div>
  </Router>
)

class Content extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    }
  }

  componentDidMount() {
    const { match } = this.props;
    let url = `http://127.0.0.1:8000/api/${match.params.category}/`;

    if (!match.params.category) {
      url = 'http://127.0.0.1:8000/api/'
    }

    axios.get(url)
      .then((response) => {
        const items = response.data;
        this.setState({ items });
        console.log('load');
      })
    console.log('mount')
  }

  componentDidUpdate() {
    const { match } = this.props;
    let url = `http://127.0.0.1:8000/api/${match.params.category}/`;

    if (!match.params.category) {
      url = 'http://127.0.0.1:8000/api/'
    }

    axios.get(url)
      .then((response) => {
        const items = response.data;
        // this.setState({ items });
        console.log('load');
      })
    console.log('update')
  }

  render() {
    return(
      <div>
        <p>
        { this.state.items.map(item => <span key={item.id}>{item.name}<br/></span>) }
        </p>
      </div>
    )
  }
}


const Main = () => (
  <Nav/>
)

export default Main;

如何在setState方法内不使用componentDidUpdate来更新我的数据？

Answer 1

只要您有条件检查，就可以在setState中使用componentDidUpdate。如果类别发生变化，您需要做的是有条件地调用componentDidUpdate中的API。

componentDidUpdate(prevProps) {

    const {match: prevMatch} = prevProps;
    const { match } = this.props;
    if(prevMatch.params.category !== match.params.category) {
        let url = `http://127.0.0.1:8000/api/${match.params.category}/`;

        if (!match.params.category) {
          url = 'http://127.0.0.1:8000/api/'
        }

        axios.get(url)
          .then((response) => {
            const items = response.data;
            // this.setState({ items });
            console.log('load');
          })
        console.log('update')
    }

  }

但在React v16.3.0之前，您还可以使用componentWillReceiveProps在类别更改时调用API。

如何在React中的render和componentDidMount之间共享数据？

1 个答案: