JSON 对象上的映射函数在 React JS 中不起作用

Question

我正在使用 react with typescript。我有一个外部 JSON 文件，我从中获取数据以在我的前端创建元素。我也有一个按钮，当用户启用该按钮时，只有元素应该创建，否则什么都不做，但我的地图功能不起作用。

这是我的代码：

import Button from '../Button/Button';
import { useState } from 'react';
import Box from './Box';

const jsonObj = require("./Helpers/dataList.json");

type JsonData = {
    index: number,
    x: number,
    y: number,
    width: number,
    height: number,
  }
  
  type JData = {
    index: number,
    indexData: JsonData[]
  }

 const updateIndex = () => {
            let cIndex: number = ...;
            setCurrentIndex(cIndex);
        }
    }

const Test = () => {
    const [currentIndex, setCurrentIndex] = useState(0);
    const [boxFlag, setBoxFlag] = useState(false);
    const [boxText, setBoxText] = useState("Show Box");

    const showBoxes = () => {
        if(!boxFlag){
            setBoxText("Disable Box");
        }
        else{
            setBoxText("Show Box");
        }
        setBoxFlag(!boxFlag);
    }

  return <div className='container'>
        <div>
        {boxFlag &&
                jsonObj.map((x: JData) => {
                    if(currentIndex === x.index){
                        x.indexData.map((y: IData) => {
                            <Box x={y.x} y={y.y} height={y.height} width={y.width}/>
                        })
                    }
                })
        }
      </div>
          <Button name={boxText} onClick={showBoxes}/>
  </div>;
};

export default Test;

和我的 JSON 文件：

[
  { "index": 8, "x": 1141, "y": 582, "width": 238, "height": 268 },
  { "index": 8, "x": 265, "y": 572, "width": 291, "height": 317},
  { "index": 8, "x": 1665, "y": 491, "width": 266, "height": 323 }
 
]

Answer 1

尝试像这样编辑显示 Boxes 的代码：

{boxFlag &&
    jsonObj.filter((x: JData) => currentIndex === x.index).map((y: IData) => {
        return <Box key={`${y.x},${y.y}`} x={y.x} y={y.y} height={y.height} width={y.width}/>
    })
}

请注意，我已将 key 属性添加到每个 Box（它必须是唯一的）。

JSON 对象上的映射函数在 React JS 中不起作用

Map fuction on JSON object not working in ReactJS

javascript

typescript

reactjs

arrow-functions