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

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)
});

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

How to pass value stored in state to another screen in react native

typescript

reactjs

react-native

react-native-android

react-hooks