当从[ JSON文件]访问数据时，它显示了未定义的react

Question

我有一个名为JSON的data.json文件，它包含以下数据。

 {
  "nav": [
    "computer engineering",
    "civl engineering ",
    "electrical engineering "
  ],
  "subjects": {
    "computer engineering": {
      "semester 1": [
        "Engineering physics-I",
        "Engineering Chemistry-I",
        "Engineering Mathematics-I",
        "Computer Fundamental",
        "Communication Nepali",
        "Communication English",
        "Computer programming in c",
        "Engineering drawing "
      ]
    }
  }
}

当我从控制台访问数据时，它会给出正确的输出，当我试图使用下面的代码访问数据时，它会给出未定义的输出。

import React from "react";
import { Context } from "../Context";
import data from "../data.json"; 

  const { click, semdata } = React.useContext(Context);
  const [semesterData, setSemesterData] = semdata;
  name = "computer engineering";

更新

{semesterData？console.log( semesterData )：null} {semesterData？Console.log(名称)：null }

 {semesterData ? console.log(data.subjects[name][semesterData]) : null}

​

​

​

​

谢谢。

Answer 1

它没有给出正确的输出是因为您正在以三元方式登录控制台，而不是将其呈现给JSX。

 {semesterData ? data.subjects[name][semesterData]) : null}

这样，如果三元返回true，就会呈现它。

Answer 2

问题不在于data.json，我认为您使用useContext的方式是错误的。

这是一个简单的示例，展示了如何使用useContext

import React from "react";
const data = {
  nav: ["computer engineering", "civl engineering ", "electrical engineering "],
  subjects: {
    "computer engineering": {
      "semester 1": [
        "Engineering physics-I",
        "Engineering Chemistry-I",
        "Engineering Mathematics-I",
        "Computer Fundamental",
        "Communication Nepali",
        "Communication English",
        "Computer programming in c",
        "Engineering drawing "
      ]
    }
  }
};
const Context = React.createContext();
export default function App() {
  return (
    <Context.Provider value={{ semdata: "semester 1" }}>
      <div className="App">
        <Display />
      </div>
    </Context.Provider>
  );
}
const Display=()=> {
  const { semdata } = React.useContext(Context);
  const [semesterData, setSemesterData] = React.useState(semdata);
  const name = "computer engineering";
  return <div>{semesterData ? data.subjects[name][semesterData] : ""}</div>;
}