将useState更新函数传递给子函数导致未定义函数错误

问题描述 投票:0回答:1

使用expo和react-native我创建了一个名为 MainStateScreen 这个屏幕基本上有两个直接的子代,叫做 OptionsComponentNavigationButton. OptionsComponent 有多个子代,当修改时,会更新该子代的状态。MainStateScreen 所以我们可以把它作为一个道具传到下一个屏幕上,并使用 NavigationButton. 至少应该是这样的。

相反,当我尝试修改 OptionsComponent的孩子,并使用 MainStateScreen的更新函数,我得到以下错误。

以下是我的组件组成的伪代码。

MainStateScreen.js

const defaultOptionsObject = [
    {
        name: '',
        value: 1,
        count: 0,
    },
    {
        name: '',
        value: 8,
        count: 0,
    },
    {
        name: '',
        value: 20,
        count: 0,
    },
    {
        name: '',
        value: 25,
        count: 0,
    },
    {
        name: '',
        value: 30,
        count: 0,
    },
    {
        name: '',
        value: 32,
        count: 0,
    },
    {
        name: '',
        value: 100,
        count: 0,
    },
]

const MainStateScreen = () => {
    const [options, setOptions] = useState(defaultOptionsObject)

    return (
        <View>
            <ScrollView>
                <OptionsComponent options={options} setOptions={setOptions} />
            </ScrollView>
            <NavigationButton onPress={() => navigation.push('OtherScreen', { options })} />
        </View>
    )
}

选项组件.js

const SingleOptionComponent = ({ index, option, options, setOptions }) => {
    const [stateOption, setStateOption] = useState({ ...option })

    const updateCount = val => {
        const tempOption = { ...stateOption }
        if (val) {
            tempOption.count += 1
        } else if (tempOption.count !== 0) {
            tempOption.count -= 1
        }
        setStateOption(tempOption)
    }

    useEffect(() => {
        const tempOptions = [ ...options ]
        tempOptions[index] = { ...stateOption }
        setOptions(tempOptions) // Commenting this out removes the error.
    }, [stateOption])

    const AddSubtractButton = () => {
        return (
            <View>
                <TouchableHighlight onPress={() => updateCount(true)}>
                    <Text>Add</Text>
                </TouchableHighlight>
                <TouchableHighlight onPress={() => updateCount(false)}>
                    <Text>Subtract</Text>
                </TouchableHighlight>
            </View>
        )
    }

    return (
        <ListItem rightElement={AddSubtractButton} />
    )
}

const OptionsComponent = ({ options, setOptions }) => {
    return (
        <View>
            {options.map((option, index) => {
                return (
                    <SingleOptionComponent
                        key={`${option?.value}-${index}`}
                        index={index}
                        option={option}
                        options={options}
                        setOptions={setOptions}
                    />
                )
            })}
        <View/>
    )
}

确切的错误是。

TypeError: undefined is not a function (near '...options.map...')

This error is located at:
    in OptionsComponent (at MainStateScreen.js)

但是当我 console.logsetOptions 中的功能 useEffectSingleOptionComponent, Function setOptions 是打印在控制台中的。

如果我把 setOptions(tempOptions) 呼叫 useEffect 里面 SingleOptionComponent 错误会消失,但我需要类似的东西来完成上传到父体和上传到母体的过程。NavigationButton.

我可能做错了什么?

android react-native expo
1个回答
0
投票

我建议做几件事情,可能会解决这个问题,而不需要在我的机器上重新创建它。 尝试添加 setOptionsuseEffect 依赖数组。 也许由于某些原因,当它被传递给孙子组件时,它没有得到更新的 setOptions。 你还应该把 options 因为你的效果取决于该值何时变化。

如果还不行的话,可以尝试使用传播操作符 setOptions({ ... tempOptions}).

如果这样不行,我建议在最上层组件中处理setOptions,并将回调传递给孙子组件,而不是将 setOptions 函数。 该回调并获得 option 父代中的按下,然后根据父代中的 option._id (我会给每个选项提供一个唯一的_id,而不是为了能做上面的事情而动态计算。)。也使代码更容易理解发生了什么,因为父体会处理它自己需要的状态,并适当地设置它。

© www.soinside.com 2019 - 2024. All rights reserved.