如果存在json键，React组件的条件呈现

Question

我试图有条件地呈现一个结果不好的组件。我读过很多教程和Stack Overflow问题，但我无法完成这项工作。你能帮我吗？

条件组件是数据可视化地理地图，其应当仅在获取的json文件具有"；代码"；钥匙换句话说，我有几十个json，其中一些包含地理地图信息，但不是全部。我一直在jsx中尝试布尔运算符和不同类型的三元运算符，但每次在侧边栏React中单击无映射项时，React都会尝试渲染Map子组件，并给出一个错误"；代码"；(键(未定义。这可能是什么原因？以下是我的代码：

App.js

function App() {
const [files, setFiles] = useState([]);
const [items, setItems] = useState([]);
const [product_id, setProduct_id] = useState(13);
const [mapCode, setMapcode] = useState(0);
useEffect(() => {
fetch("/sidebar")
.then((res) => res.json())
.then((data) => {
setItems(data);
});
}, []);
useEffect(() => {
fetch(`/data/${product_id}`)
.then((res) => res.json())
.then((data) => {
setFiles(data);
if ("code" in data[0]) setMapcode(1);
else setMapcode(0);
console.log(mapCode);
});
}, [product_id]);
function HandleSelection(e) {
setProduct_id(e);
}

内部useEffect如果提取的产品数据包括"；代码"；每次在侧边栏中单击项目(产品(时，键I都会更改mapCode。log(mapCode(提供了正确的结果。

下面是App.js的return((中的基本代码。我尝试了几种方法来实现条件渲染。

<div className="col-6">
<Files files={files} />
</div>
<div className="col-3">

{/*Boolean(mapCode) && <Map files={files} />*/}
{/*mapCode === true && <Map files={files} />*/}
mapCode === true ? <Map files={files} /> : <div>No map</div>
</div>

我一直想知道useEffect是否是使用setMapcode(0(和setMapcode(1(的正确位置？

Answer 1

首先应该将布尔值设置为isMapCode，而不是数字：

const [isMapCode, setIsMapcode] = useState(false);
useEffect(() => {
fetch(`/data/${product_id}`)
.then((res) => res.json())
.then((data) => {
setFiles(data);
setIsMapcode(data[0].code !== undefined);
});
}, [product_id]);

因此，您应该在作用域({}(内检查其值：

<div className="col-3">
{isMapCode ? <Map files={files} /> : <div>No map</div>}
</div>

请注意，您不需要其他状态，您可以检查您的files状态：

const isMapCodeAvailable = data[0].code !== undefined;
<div className="col-3">
{isMapCodeAvailable ? <Map files={files} /> : <div>No map</div>}
</div>