Как вызвать ререндер компонента?

Question

[mrrangerr]

Всем привет, у меня есть функция которая возвращает табы, как вызвать ререндер этой функции если значение другого стейта поменялось?
Сама функция

function renderConditionsTabPanes(): ReactNode {
        const result = conditions.find((item: Conditions) => item.id === activeConditionType)
        return <TabPane tab={result && result.description} key={result && result.id} />
    }

Его вызов

<Tabs>
            {renderConditionsTabPanes()}
 </Tabs>

Стейт с помощью которого должен происходить ререндер

const [activeConditionType, setActiveConditionType] = useState(1)

Answer 1

[Александр]

Вызовите setActiveConditionType.

Comments

[mrrangerr]

Он и так вызывается, только в другом табе, в зависимости от значения activeConditionType мне нужно найти в массиве объект, вот только это происходит один раз, если я меняю таб в котором стоит обработчик события то уже функция которая возвращает список табов не вызывается

<Tabs centered onChange={activeConditionTypeHandler}>
           {renderTabPanes()}
       </Tabs>

[Александр]

mrrangerr, Весь код можно?

[mrrangerr]

Александр,

export const ConditionsSettings: React.FunctionComponent = () => {
    const dispatch = useDispatch()
    const conditionsSettingsTypes = useSelector((state: RootState) => state.conditionsSettings.data)
    const conditionsSettingsTypesValues = useSelector((state: RootState) => state.conditionsSettingsTypesValues.data)
    const conditions = useSelector((state: RootState) => state.conditions.data)



    const [condition, setCondition] = useState(1)
    const [activeConditionType, setActiveConditionType] = useState(1)
    const [, forceUpdate] = useState()

    const activeConditionTypeHandler = (key: any) => {
        setActiveConditionType(key)
    }

    const conditionHandler: any = (key: number) => {
        setCondition(key)
    }

    useEffect(() => {
        dispatch(loadConditionsSettings())
    }, [])

    useEffect(() => {
        dispatch(loadConditionsTypesValues(condition))
    }, [condition])

    useEffect(() => {
        dispatch(loadConditions())
    }, [])


    function renderCheckboxes(): ReactNode {
        const values = conditionsSettingsTypesValues.map((item: ConditionsSettingsTypesValues) => {
            return <Checkbox key={item.id}>{item.description}</Checkbox>
        })
        return values
    }

    function renderTabPanes(): ReactNode {
        const types = conditionsSettingsTypes.map((item: ConditionsSettingsTabe) => {
            return <TabPane tab={item.description} key={item.id}>{renderCheckboxes()}</TabPane>
        })
        return types
    }

    function renderConditionsTabPanes(): ReactNode {
        const result = conditions.find((item: Conditions) => item.id === activeConditionType)
        return <TabPane tab={result && result.description} key={result && result.id} />
    }
    

    return (
        <div>
       <Tabs centered onChange={activeConditionTypeHandler}>
           {renderTabPanes()}
       </Tabs>
        <Tabs onChange={activeConditionTypeHandler}>
            {renderConditionsTabPanes()}
        </Tabs>
        </div>
    )
}

[Александр]

mrrangerr,

Попробуйте

export const ConditionsSettings: React.FunctionComponent = () => {
    const [condition, setCondition] = useState(1)
    const [activeConditionType, setActiveConditionType] = useState(1)

    const dispatch = useDispatch()
    const conditionsSettingsTypes = useSelector((state: RootState) => state.conditionsSettings.data)
    const conditionsSettingsTypesValues = useSelector((state: RootState) => state.conditionsSettingsTypesValues.data)
    const conditions = useSelector((state: RootState) => state.conditions.data)
    const currentConditions = conditions.filter((item: Conditions) => item.id === activeConditionType)

    const activeConditionTypeHandler = (key: any) => {
        setActiveConditionType(key)
    }

    const conditionHandler: any = (key: number) => {
        setCondition(key)
    }

    useEffect(() => {
        dispatch(loadConditionsSettings())
    }, [])

    useEffect(() => {
        dispatch(loadConditionsTypesValues(condition))
    }, [condition])

    useEffect(() => {
        dispatch(loadConditions())
    }, [])

    return (
        <>
           <Tabs centered onChange={activeConditionTypeHandler}>
               {conditionsSettingsTypes.map((item: ConditionsSettingsTabe) => (
                   <TabPane tab={item.description} key={item.id}>
                       {conditionsSettingsTypesValues.map((item: ConditionsSettingsTypesValues) => (
                           <Checkbox key={item.id}>{item.description}</Checkbox>
                       ))}
                   </TabPane>
               ))}
           </Tabs>
            <Tabs onChange={activeConditionTypeHandler}>
                {currentConditions.map((item: Conditions) => (
                   <TabPane tab={item.description} key={item.id} />
                ))}
            </Tabs>
        </>
    )
}

[mrrangerr]

Александр, не работает(

[Александр]

mrrangerr, В CodeSandbox сможете оформить пример?