如何使用typescript和react填充组件数组

pftdvrlh 于 2023-03-19 发布在 TypeScript

关注(0)|答案(2)|浏览(103)

我正在使用map创建一堆CarBlock项目。我希望使用state将这些项目填充到数组中。这就是我的工作方式

import React, { useEffect, useState } from "react";
import CarBlock from "../carBlock/carBlock";

export interface CarDataProps {
    carData: Car[];
};

// Export this type of reused interface to somewhere else maybe to import it wherever needed 
export interface Car {
    id: string,
    modelName: string,
    bodyType: string,
    modelType: string,
    imageUrl: string
}

export default function CarList(props: CarDataProps) {
    const [carBlockList, setCarBlockList] = useState<Car[]>([]);

    const carsJSONData = props.carData;

    function createCarBlocks(){
        const carBlockItems = carsJSONData.map((car) => {
            // useEffect(() => setCarBlockList(carsJSONData),[])
            // console.log(carBlockList)
             return <CarBlock  carBlockItem={car} key={car.id}/>
        })

        return carBlockItems;

    };

    return (
        <div className="car-list">
            {createCarBlocks()}
        </div>
    );
};

我收到一条错误消息：类型的参数（carBlockList：never[]）=〉Car[]'不能赋值给类型为'SetStateAction〈never[]〉'的参数。
我想我需要输入is，但是我很难理解我如何才能完成这个。是否可以输入一个数组来拥有React Components的类型？

typescript

来源：https://stackoverflow.com/questions/75777489/how-to-populate-array-of-components-using-typescript-and-react

2条答案

按热度按时间

nc1teljy1#

要键入修复useState，您可以遵循以下步骤。

const [carBlockList, setCarBlockList] = useState<JSX.Element[]>([]);

useEffect(()=>{
    const carJsxList = props.carData.map((car) => <CarBlock  carBlockItem={car} key={car.id}/>);
},[])

这应该可以解决它;
除此之外，你为什么要在渲染部分调用这个函数呢？从你的用例来看，我看不出有什么必要。
建议您了解更多有关

useEffect
useState
因为这些可以被称为React和学习的基本先决条件，这将从长远来看对你有所帮助。

赞(0）回复(0）举报 2023-03-19

mutmk8jj2#

如果我理解你只是想传递使用carData中的数据来渲染一些元素，那么基本上你Map了数据并渲染了CarBlock，我认为你已经做得很好了，所以在最基本的形式中你会有。

export default function CarList(props: CarDataProps) {
    return (
        <div className="car-list">
            {props.carData.map((car)=><CarBlock carBlockItem={car} key={car.id} />)}
        </div>
    );
};

这样做很好。据我所知，我想你在聊天中说过，你想把一些呈现的元素存储为状态，这在技术上是可能的，但这样做真的没有意义，你应该处理状态中的数据，并使用组件来呈现数据。任何优化最终都可以在组件本身上完成，比如useMemo '等。但这些都是额外的，当你需要的时候。
无论哪种方式，为了完整，你可以做你所说的，但你不应该哈哈。

function CarList(props: CarDataProps) {
  const [carBlockList, setCarBlockList] = useState<ReactNode>([]);

  useEffect(
    () =>
      setCarBlockList(
        props.carData.map((car) => <CarBlock carBlockItem={car} />)
      ),
    [props.carData]
  );

  return <div className="car-list">{carBlockList}</div>;
}

像useEffect这样的钩子需要以特定的方式调用，可以参见https://legacy.reactjs.org/docs/hooks-rules.html
总而言之，在react中，你有很多数据和组件。元素是由组件生成的，当它们被赋予一些属性，数据。一般来说，除非你有非常特殊的情况，否则你应该只处理数据和组件，让react生成元素。

赞(0）回复(0）举报 2023-03-19

我来回答

如何使用typescript和react填充组件数组

2条答案

相关问题

热门标签

最新问答