react-select 下拉列表 selection 后的 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()}

react-select 下拉列表 selection 后的 ReactJS 无限循环

ReactJS infinite loop after react-select dropdown selection

reactjs

react-select