反应选择下拉选择后的 ReactJS 无限循环

Question

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

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

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

(状态搜索.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()}