React-select下拉选择后的ReactJS无限循环

Question

我几周前才开始自学ReactJS，但我一直试图弄清楚为什么从下拉列表中选择一个值后，我的API总是在无限循环中受到打击。我有一个名为StateSearch.js的搜索组件，该组件正在StatePolicyPage.js组件中呈现。

在StatePolicyPage.js中，我调用<StateSearch parentCallback={this.callbackFunction} />，以便可以获取用户从下拉菜单中选择的值并设置状态。在StateSearch.js中，我使用props.parentCallback(response.data)

传递选定的值

问题是由于某种原因发生了无限循环，并且我的Rails API不断被调用，而不仅仅是一次返回数据。

（（StateSearch.js）搜索组件

import React, { useState } from 'react'
import Select from 'react-select'
import makeAnimated from 'react-select/animated';
import axios from 'axios';
import statesJSON from '../../helpers/states'; 

// uses 'react-select'
export default function StateSearch(props) {
  const [americanState, setAmericanState] = useState();

    // if a state was selected from the dropdown
    if (americanState) {
      axios.get("http://localhost:3001/get_stuff", {
        params: {
          state: americanState.value
        }
      }).then(response => {
        // the response back from the Rails server
        if (response.status === 200) {
          props.parentCallback(response.data); // send data back up to parent
        }
      }).catch(error => {
        console.log("Error fetching the state ", americanState.value, error);
      })
      event.preventDefault();
    }    

  // the dropdown select box for states.
  return (
    <div>
      <Select 
        options={statesJSON}
        placeholder="Select a State"
        onChange={setAmericanState}
        noOptionsMessage={() => 'Uh-oh nothing matches your search'}
        className=""
        components={makeAnimated()}
        isSearchable
        isClearable={true}
      />
    </div>
  )
}

（（StatePolicyPage.js）搜索结果应该传递给的组件

import React, { Component } from 'react'
import Navigation from './Navigation';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import StateSearch from './search/StateSearch';

export default class StatePolicyPage extends Component {
  constructor(props) {
    super(props);

    this.state = { 
      id: '',
      stateName: '',
      updatedAt: '',
      createdAt: ''
    }    
  }

  callbackFunction = (childData) => {    
    console.log(childData);

    this.setState({
      id: childData.id,
      stateName: childData.state_name,
      updatedAt: childData.updated_at,
      createdAt: childData.created_at
    })
  }

  render() {
    return (
      <div>
        <Navigation 
          isLoggedIn={this.props.loggedInStatus} 
          user={this.props.user}
          handleLogoutClick={this.props.handleLogoutClick} 
          handleLogout={this.props.handleLogout} 
        />
        <Container>

         {/* get the dropdown value from the StateSearch back */}
          <StateSearch parentCallback={this.callbackFunction} /> 

          <div>
            <Row>   
            { this.state.id }
            </Row>   
          </div>
        </Container>
      </div>
    )
  }
}

Answer 1

始终将useEffect()挂钩用于异步任务。

useEffect(() => {
// if a state was selected from the dropdown
    if (americanState) {
      axios.get("http://localhost:3001/get_stuff", {
        params: {
          state: americanState.value
        }
      }).then(response => {
        // the response back from the Rails server
        if (response.status === 200) {
          props.parentCallback(response.data); // send data back up to parent
        }
      }).catch(error => {
        console.log("Error fetching the state ", americanState.value, error);
      })
    }    
}, [americanState]);

Answer 2

此行在我看来可能会导致无限循环：

 components={makeAnimated()}

我不确定这个函数在做什么，但是当将函数传递给另一个组件时，您不能直接调用它们。

尝试用此替换上面的行：

components={makeAnimated}

或与此：

components={() => makeAnimated()}