Question

在我的代码中，我传递状态和钩子以将状态更改为子组件。子组件可以更改提供的值，但是不能使用提供的钩子将此值发送回父级。

我知道代码有点奇怪，如果选中了复选框，我正在尝试从数组中添加/删除元素。

这是代码：

import React, { useState, useEffect } from 'react'
import { View, SafeAreaView, Text, ScrollView } from 'react-native'
import {generalStyles} from '@gym-app/styles/general'
import { useTranslation } from 'react-i18next'
import persistent from '@gym-app/database/persistent'
import CheckboxRow from '../../components/workout/exercises/filters/CheckboxRow'
import tdb from '@gym-app/translation/object'

export default function ExercisesFilterScreen() {

    const {t} = useTranslation();
    const [equipments, setEquipments] = useState({});
    const [selectedEquipments, setSelectedEquipments] = useState({});

    if(Object.values(equipments).length == 0) {
        persistent.transaction(tx => {
            tx.executeSql('SELECT * FROM equipment', [],
            (t, s) => {
                setEquipments(s.rows._array)
            }, (t, e) => {
                console.log(e)
            })
        })
    }

    useEffect(() => {
          alert(JSON.stringify(selectedEquipments))
      }, []);

    return (
        <SafeAreaView style={{flex: 1}}>
            <ScrollView style={[generalStyles.contentContainer, {flex: 1, backgroundColor: '#ffb623'}]}>
                <Text>{JSON.stringify(selectedEquipments)}</Text>
                <Text style={{fontSize: 30, fontWeight: 'bold', color: '#ffffff', textAlign: 'center'}}>{t('general.filters').toUpperCase()}</Text>
                <View style={{marginTop: 10}}>
                    <Text style={{ marginBottom: 6, fontSize: 24, fontWeight: 'bold', color: '#ffffff', textAlign: 'left'}}>{t('exercise.availableEquipment').toUpperCase()}</Text>
                    {Object.values(equipments).map((equipment) => {
                        return <CheckboxRow key={equipment.id} selected={selectedEquipments} select={setSelectedEquipments} multi={true} id={equipment.id}>{tdb(equipment, 'name')}</CheckboxRow>
                   })}
                </View>
            </ScrollView>
        </SafeAreaView>
    )
}

import React, { useState } from 'react'
import { TouchableOpacity, Text, StyleSheet } from 'react-native'
import Checkbox from './Checkbox'

export default function CheckboxRow(props) {

    const [checked, setChecked] = useState(false);

    return (
        <TouchableOpacity style={styles.row}
            onPress={
                () => {
                    var id = props.id;
                    var selected = props.selected;
                    var s = selected;
                    if(props.multi == true) {
                        if(s[id] == undefined) {
                            s[id] = id;
                        } else {
                            delete s[id];
                        }
                    } else {
                        if(s == id) {
                            s = undefined;
                        } else {
                            s = id;
                        }
                    }
                    props.select(s)
                    setChecked(!checked);
                }
            }>
            <Checkbox checked={checked} />
            <Text style={styles.rowText}>{props.children}</Text>
        </TouchableOpacity>
    )
}

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row', 
        alignItems: 'center'
    },
    rowText: {
        fontSize: 26,
        color: 'white',
        marginLeft: 6,
        fontWeight: '700'
    }
})

useEffect中的警报未触发，因此我认为状态没有改变。

Answer 1

您提供给useEffect的第二个参数是一组依赖项，供其监视以了解何时触发。传递空数组时，它仅在初始安装时运行（在卸载时运行返回值）。如果您将该空数组更改为[selectedEquipments]，它是否可以按预期工作？

反应孩子不会更新父母的挂钩状态

1 个答案: