React子组件更新本地变量的方法？解决无限重渲染问题

问题场景 #

我有3个组件，父组件为App，子组件为SearchFlight和FoundFlight。尝试将App从SearchFlights（通过flightInput属性）接收到的字符串值传递给FoundFlight，并希望每次该值变化时，FoundFlight都能将其赋值给本地变量。

代码实现 #

App.js

import { useState } from 'react';
import FoundFlight from './Components/FoundFlight';
import SearchFlights from './Components/SearchFlights';

function App() {
  const [searchedFlight, setSearchedFlight] = useState('');

  const searchedFlightHandler = (searchedFlightNum) => {
    setSearchedFlight(searchedFlightNum);
  };

  return (
    <div>
      <SearchFlights flightInput={searchedFlightHandler} />
      <FoundFlight userInput={searchedFlight} />
      <FlightList />
    </div>
  );
}

export default App;

SearchFlights.js

import { useState } from 'react';

const SearchFlights = (props) => {
  const [enteredFlight, setEnteredFlight] = useState('');

  const flightInputHandler = (event) => {
    setEnteredFlight(event.target.value);
    props.flightInput(enteredFlight);
  };

  return (
    <>
      <div className="container">
        <h1>Search Flights</h1>
        <form>
          <label>Enter a flight number</label>
          <input type="text" onChange={flightInputHandler} />
        </form>
      </div>
    </>
  );
};
export default SearchFlights;

FoundFlight.js

import Card from '../UI/Card';
import { useState } from 'react';
import './FoundFlight.css';

const FoundFlight = (props) => {
  const [filteredFlight, setFilteredFlight] = useState('');
  setFilteredFlight(props.userInput);

  let foundFlightOutput = (
    <Card>
      <p>No flight found yet</p>
    </Card>
  );

  return foundFlightOutput;
};

export default FoundFlight;

遇到的错误 #

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

提问 #

如何在FoundFlight.js中，每次从App.js接收到的字符串值更新时，将其赋值给本地变量？

解决方案 #

1. 无限重渲染的原因 #

在FoundFlight组件的函数体内直接调用setFilteredFlight(props.userInput)会触发组件重新渲染，而每次渲染又会再次执行这个状态更新操作，形成无限循环，触发React的重渲染限制。

2. 正确实现：使用useEffect监听props变化 #

要在props更新时同步本地状态，需要借助useEffect钩子，它可以指定依赖项，只有当依赖项变化时才执行副作用操作：

修改后的FoundFlight.js：

import Card from '../UI/Card';
import { useState, useEffect } from 'react';
import './FoundFlight.css';

const FoundFlight = (props) => {
  const [filteredFlight, setFilteredFlight] = useState('');

  // 监听userInput的变化，同步到本地状态
  useEffect(() => {
    setFilteredFlight(props.userInput);
  }, [props.userInput]); // 依赖数组：仅当userInput改变时执行

  // 根据状态调整输出内容
  let foundFlightOutput = (
    <Card>
      {filteredFlight ? (
        <p>Found flight: {filteredFlight}</p>
      ) : (
        <p>No flight found yet</p>
      )}
    </Card>
  );

  return foundFlightOutput;
};

export default FoundFlight;

3. 额外修复：SearchFlights的传值延迟问题 #

SearchFlights中的flightInputHandler存在异步更新的问题：setEnteredFlight是异步操作，此时直接传递enteredFlight会拿到更新前的旧值，应该直接使用event.target.value传递最新输入：

修改后的flightInputHandler：

const flightInputHandler = (event) => {
  const inputValue = event.target.value;
  setEnteredFlight(inputValue);
  props.flightInput(inputValue); // 直接传递最新的输入值
};

内容的提问来源于stack exchange，提问作者KapteinKonyn