Блог

У меня есть компонент StatusBoxComponent , который имеет два статуса: Break-In и Break-out ,

Таким образом, изначально Break-In окно будет видно при открытии этого экрана.

Теперь я хотел, чтобы, когда я нажимаю Break-in на коробку, сразу под Break-out ней должна появиться коробка, и на этой Break-out коробке я снова хотел нажать вот эту, чтобы Break-in коробка была ниже этой. И этот процесс должен продолжаться.

 const AttendanceScreen = (props: any) => {

    const [inState, setInState] = useState([<View />]);
    
    const breakOutClick = () => {
        setInState([
            ...inState,
            <>
                <StatusBoxComponent
                    status={'Break-In'}
                    breakIn={breakInClick}      // Point 3
                />
                {inState}
            </>,
        ]);
    };

    const breakInClick = () => {
        setInState([
            ...inState,
            <>
                <StatusBoxComponent
                    status={'Break-Out'}
                    breakIn={breakOutClick}      // Point 2
                />
                {inState}
            </>,
        ]);
    };

    return (
        <>
            <StatusBoxComponent
                status={'Break-In'}
                breakIn={breakInClick}      // Point 1
            />
            {inState}
        </>
    );
};
 

Но, что происходит, когда я сначала нажимаю break-in , появляется одно break-out поле, но когда я нажимаю на это break-out , то вместо добавления нового поля ниже оно заменяет текущее поле. И когда вы нажимаете на начальное break-in поле, ниже добавляется более 1 break-in поля.

Я не знаю, где в моей логике я ошибаюсь.

Хранение компонентов внутри состояния, как правило, является плохой идеей, когда вы можете управлять своим состоянием с помощью сериализуемых значений.

 const AttendanceScreen = (props: any) => {

    const [statuses, setStatuses] = useState(['Break-In']);

    
    
    const breakOutClick = () => {
        setStatuses([
            ...statuses,
            'Break-In',
        ]);
    };

    const breakInClick = () => {
        setStatuses([
            ...statuses,
            'Break-Out',
        ]);
    };

    return (
        <>
            {statuses.map((status, index) => (
                 <StatusBoxComponent
                     key={index}
                     status={status}
                     breakIn={breakInClick}      // Point 1
                 />
            )}
        </>
    );
};