如何在本机反应中将存储在状态中的值传递到另一个屏幕

Question

所以我创建了一个像这样的状态：

const [inState, setInState] = useState([<View />]);

然后点击一些按钮，我正在更新inState

const breakOutClick = () => {
    setInState([
        ...inState,
        <>
            <StatusBoxComponent
                ImageConfigIconCheckOut={true}
                status={'Break-Out'}
                time={time}
            />
        </>,
    ]);
};

const breakInClick = () => {
    setInState([
        ...inState,
        <>
            <StatusBoxComponent
                ImageConfigIconCheckOut={true}
                status={'Break-In'}
                time={time}
            />
        </>,
    ]);
};

我能够以这种方式在同一屏幕上显示存储在 inState 中的所有内容：

<View>
    {inState}
</View>

但我想将此inState 传递到另一个屏幕并显示存储在inState 中的所有内容。

为此，我尝试了以下方法：

props.navigation.navigate(ChartScreen, {
            inState: inState,
        });

然后在第二个屏幕上，即 ChartScreen，我做了以下操作：

const ChartScreen = (props: any) => {
    const {inState} = props.route.params;
    return (
        <View style={styles.screen}>
            {inState}
        </View>
    );
};

但第二次我收到错误TypeError: cyclical structure in JSON object, js engine: hermes。

我不知道我做错了什么，请帮忙

Answer 1

尝试以下以防止循环结构：

props.navigation.navigate(ChartScreen, {
        inState: {…inState}
});

除了……你可以写：

props.navigation.navigate(ChartScreen, {
        inState: Object.assign({}, inState)
});