从一个json中只获取一个数据

Question

我有一个问题，我已经搜索并尝试了解决方案，但没有一个对我有用。我的问题如下，我有一个json，我做了一个fetch，嗯，问题是我想突出一个特定的位置，我想把它放在一张卡片上，这样看起来更漂亮。但是，当然，当我这样做时，它会将所有 json 元素放在一张新卡中。 好吧，我的获取是基本的：

export default () => {
  const classes = useStyles();

  const url = "Datos.json";
  const [todos, setTodos] = useState();
  const fetchApi = async () => {
    const response = await fetch(url);
    const responseJSON = await response.json();
    setTodos(responseJSON);
  };
  useEffect(() => {
    fetchApi();
  }, []);
  return (
    <div>
      {/*{props.data.rows.map((item, indx) => {*/}
      {!todos
        ? "Cargando..."
        : todos.map((todo, index) => {
            var dta = [];
            var date = new Date(todo.dt * 1000);
            var hours = "0" + date.getHours();
            var minutes = "0" + date.getMinutes();
            var formattedTime =
              hours.substr(-2) +
              ":" +
              minutes.substr(-2); /*+ ':' + seconds.substr(-2)*/
            dta.push(formattedTime);
            console.log(todos);
            return (
              <div>
                <Typography>{todo.Competicion}:</Typography>
                <Typography variant="h1" gutterBottom>
                  {dta} {todo.evento} {/* FEATURED EVENT, MUST BE 1 OR 2 MAXIMUM, LATER REPLACEMENT BY THE CARD WITH IMG, ETC... */}
                </Typography>
                <Typography variant="h6" gutterBottom>
                  {dta} {todo.evento} {/* ALL EVENTS (INCLUDING HIGHLIGHTS)*/}
                </Typography>
                <OldButtons {...todo} />
              </div>
            );
          })}
      {/*})}*/}
    </div>
  );
};

我只想打印所有 json 的一个位置，如下所示： all.event[0]，就好像它是一个数组一样。
我的结构 json 是基本的：

[
  {
    "dt": "1668339000",
    "Partido": "PHYT6",
    "Competicion": "Error",
    "Estadisticas": "",
    "Switch": 0,
    "EnlaceMatchs": {
      "valor1": "",
      "valor2": "",
      "valor3": "",
      "valor4": "",
      "valor5": "",
      "valor6": ""
    }
  },
  {
    "dt": "1668339000",
    "Partido": "PHYT7",
    "Competicion": "Error",
    "Estadisticas": "",
    "Switch": 0,
    "EnlaceMatchs": {
      "valor1": "",
      "valor2": "",
      "valor3": "",
      "valor4": "",
      "valor5": "",
      "valor6": ""
    }
  },
  {
    "dt": "1668339000",
    "Partido": "PHYT8",
    "Competicion": "Error",
    "Estadisticas": "",
    "Switch": 0,
    "EnlaceMatchs": {
      "valor1": "",
      "valor2": "",
      "valor3": "",
      "valor4": "",
      "valor5": "",
      "valor6": ""
    }
  },
]

Answer 1

我不知道你的 JSON 的结构

但这可以帮助你

How to access first element of JSON object array

编辑：

如果您的 JSON 是字符串，请在将其保存到 setTodos 之前使用 JSON.parse(responseJSON)

现在你可以像处理数组一样处理它

const [todos, setTodos] = useState([]);
const position = 17;

return(
 <div>
   {todos && todos.length !== 0 ? 
    <>
     <Typography>{todos[position].Competicion}:</Typography>
     <Typography variant="h1" gutterBottom>
     {todos[position].evento} 
     </Typography> 
    </> : <Typography>Empty</Typography>}
 </div>
);

但这不是动态的，你可以：

const [todos, setTodos] = useState([]);
const [position, setPosition] = useState(0);

const handleChangePosition = (event) => {
 const value = event.target.value;
 if(todos && todos.length !== 0 && value <= todos.length && value >= 0)
  setPosition(value);
}

return(
 <div>
   {todos && todos.length !== 0 ? 
    <>
     <input value={position} onChange={handleChangePosition} />
     <Typography>{todos[position].Competicion}:</Typography>
     <Typography variant="h1" gutterBottom>
     {todos[position].evento} 
     </Typography> 
    </> : <Typography>Empty</Typography>}
 </div>

您也可以从特定索引开始并继续迭代。

Start a for loop on specific index