reactjs 如何防止react组件在渲染时重新声明变量？

5us2dqdw 于 2023-01-08 发布在 React

关注(0)|答案(1)|浏览(167)

我有一个名为Flightlist的React组件，它通过props.newFlight从其父组件接收一个对象。
我想将从父对象接收到的每个对象推送到一个名为flightList的本地数组。
我的问题是，我在组件的开头将此数组声明为空数组，并且每次组件重新呈现时，我推送到的数组都会重新声明为空数组。
因此，当我在push（）方法之后将数组记录到控制台时，它总是只包含通过props接收的最新对象。
请参见下面的FlightList组件：

import Card from '../UI/Card';

const FlightList = (props) => {
  let flightList = [];

  flightList.push(props.newFlight);

  console.log('flightlist array', flightList);

  return (
    <>
      <ul>
        <li>
          <Card>
            <h1></h1>
          </Card>
        </li>
      </ul>
    </>
  );
};

export default FlightList;

(Note：父组件是管理状态的组件，因此我不管理子组件中的状态）
如何在子组件中声明这个数组，而不在每次状态更新时重新声明它？

reactjs

来源：https://stackoverflow.com/questions/75021863/how-do-i-prevent-re-declaring-a-variable-in-a-react-component-when-it-renders

1条答案

按热度按时间

3wabscal1#

如果父组件负责管理状态，则不应将单个newFlight变量传递给FlightList，而应使用useState在父组件中声明flightList变量，然后将其作为prop传递给FlightList组件：
父组件：

const [flightList, setFlightList] = useState([])

// When a new flight is added
const addNewFlight = (newFlight) => {
setFlightList([...flightList, newFlight])
}

return <FlightList flightList={flightList} />

您的FlightList组件：

import Card from '../UI/Card';

const FlightList = (props) => {
  console.log(props.flightList)

  return (
    <>
      <ul>
        <li>
          <Card>
            <h1></h1>
          </Card>
        </li>
      </ul>
    </>
  );
};

export default FlightList;

赞(0）回复(0）举报 2023-01-08

我来回答

reactjs 如何防止react组件在渲染时重新声明变量？

1条答案

相关问题

热门标签

最新问答