title: Updating component state in React-Redux with API calls
body: <p>I'm trying to set up a React app where clicking a map marker in one component re-renders another component on the page with data from the database and changes the URL. It works, sort of, but not well.
  I'm having trouble figuring out how getting the state from Redux and getting a response back from the API fit within the React life cycle.</p>
  
  <p>There are two related problems:</p>
  
  <p>FIRST: The commented-out line "//APIManager.get()......" doesn't work, but the hacked-together version on the line below it does.</p>
  
  <p>SECOND: The line where I'm console.log()-ing the response logs infinitely and makes infinite GET requests to my database.</p>
  
  <p>Here's my component below:</p>
  
  <pre><code>class Hike extends Component {
    constructor() {
      super()
      this.state = {
        currentHike: {
          id: '',
          name: '',
          review: {},
        }
      }
    }
  
    componentDidUpdate() {
      const params = this.props.params
      const hack = "/api/hike/" + params
      // APIManager.get('/api/hike/', params, (err, response) =&gt; { // doesn't work
      APIManager.get(hack, null, (err, response) =&gt; { // works
        if (err) {
          console.error(err)
          return
        }
        console.log(JSON.stringify(response.result)) // SECOND
  
        this.setState({
          currentHike: response.result
        })
      })
    }
  
    render() {
      // Allow for fields to be blank
      const name = (this.state.currentHike.name == null) ? null : this.state.currentHike.name
  
      return (
        &lt;div&gt;
          &lt;p&gt;testing hike component&lt;/p&gt;
          &lt;p&gt;{this.state.currentHike.name}&lt;/p&gt;
        &lt;/div&gt;
      )
    }
  }
  
  const stateToProps = (state) =&gt; {
    return {
      params: state.hike.selectedHike
    }
  }
  
  export default connect(stateToProps)(Hike)
  </code></pre>
  
  <p>Also: When I click a link on the page to go to another url, I get the following error: </p>
  
  <pre><code>"Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op."
  </code></pre>