React Native 中的条件渲染问题答案

【问题标题】：Problem with conditional rendering in React NativeReact Native 中的条件渲染问题
【发布时间】：2021-08-21 20:27:15
【问题描述】：

我有一张地图，我希望在用户长按某个点时出现一个标记。我有以下代码：

    const [coords, setcoords] = React.useState(getcoord());
    const [show, setShow] = React.useState(false);

    const setPointCoords = (e) => {
        setcoords(e.geometry.coordinates);
        setShow(!show);
    }

    return (
        <View style={style.page}>
            <MapboxGL.MapView
                style={style.map}
                rotateEnabled={false}
                styleURL="mapbox://styles/daskalgg/ckp26fbmb34iv18otkav9sj4s"
                onLongPress={(e) => {
                    setPointCoords(e);
                }}
            >
                {
                    show &&
                    <MapboxGL.PointAnnotation
                        key="marker"
                        id="point"
                        draggable={true}
                        coordinate={coords} />
                }
            </MapboxGL.MapView>
            {
                show &&
                <Text>test</Text>
            }
        </View>
    );

我遇到的问题是，尽管调用了 setPointCoords 并且 show 的值发生了变化，但标记从未出现。

我注意到的一些事情：

用于测试目的的 Text 元素按预期工作。
当 show 的初始值为 true 时问题就消失了。

【问题讨论】：

标签： react-native conditional-rendering

【解决方案1】：

试试这个

{show ? (
   <MapboxGL.PointAnnotation
     key="marker"
     id="point"
     draggable={true}
     coordinate={coords} 
   /> )
: null}

【讨论】：

感谢您的回答。不幸的是，它也不起作用。
抱歉，问题是因为 MapboxGL.PointAnnotation 似乎不能很好地处理有条件地渲染子组件。通过您发布的答案意识到这一点。

【解决方案2】：

我找到了一个解决方案，但它很老套

                <MapboxGL.PointAnnotation
                    key="marker"
                    id="point"
                    draggable={true}
                    onSelected={(e) => {
                        console.log(e);
                    }}
                    coordinate={coords} >
                    <View
                        key="marker"
                        style={{
                            borderColor: "black", backgroundColor: "red",
                            display: show ? 'flex' : 'none'
                        }}
                    >
                        <Text> This is a Marker </Text>
                    </View>
                </MapboxGL.PointAnnotation>

由于我无法控制 PointAnnotation 本身的样式，所以我显示一个视图并通过“显示”控制它的可见性。我不接受它作为正确答案，但希望有更好的答案。

【讨论】：