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

Question

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

中使用 setState

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;

如何在不使用 componentDidUpdate 方法中的 setState 的情况下更新我的数据？

Answer 1

只要有条件检查就可以在componentDidUpdate中使用setState。如果类别发生变化，您需要做的是有条件地调用 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 之间共享数据？

How to share data between render and componentDidMount in React?

setstate

reactjs