React useState导致渲染循环

Posted 2023-02-21

我正在获取数据，并尝试使用useState挂钩将响应存储为状态。当我从selectedRouteDirection函数设置getRouteDirection时，渲染将在无限循环中运行。如何使用useState设置状态并仅渲染一次？

import React,  useState, Fragment, useEffect  from 'react';

const parser = require('xml-js');

const RouteSelect = props => 
    const  routes  = props;

    const [selectedRouteName, setRouteName] = useState('');
    const [selectedRouteDirection, setRouteDirection] = useState('');

    useEffect(() => 
        if(selectedRouteName) 
            getRouteDirection();
        
    );

    const onChangeHandler = event => 
        setRouteName( name: event.target.value );
    

    const getRouteDirection = () => 

        const filteredRoute = routes.filter(route => route.Description._text === selectedRouteName.name);
        const num = filteredRoute[0].Route._text;

        let directions = [];
        fetch(`https://svc.metrotransit.org/NexTrip/Directions/$num`)
            .then(response =>  
                return response.text();
            ).then(response => 
                return JSON.parse(parser.xml2json(response, compact: true, spaces: 4));
            ).then(response =>  // offending block
                directions = response.ArrayOfTextValuePair.TextValuePair;
                // console.log(directions);
                setRouteDirection(directions);    
            )
            .catch(error => 
                console.log(error);
            );

        console.log(selectedRouteDirection);
    

    const routeOptions = routes.map(route => <option key=route.Route._text>route.Description._text</option>);

    return (
        <Fragment>
            <select onChange=onChangeHandler>
                routeOptions
            </select>
        selectedRouteName ? getRouteDirection() : null 
        </Fragment>
    );
;

export default RouteSelect;

答案

那是因为您要在返回的值中调用getRouteDirection()，而不要使用useEffect来调用getRouteDirection()

 ...

 useEffect(() => getRouteDirection());

 return (
        <Fragment>
            <select onChange=onChangeHandler>
                routeOptions
            </select>
         //some thing 
        </Fragment>
    );

解释：每次调用getRouteDirection()都会改变状态，当状态改变时，这将导致再次调用getRouteDirection()，依此类推。