无法访问函数外的对象属性

Question

我是 React Js 或任何类型的 javascript 框架的新手。我在“onLoadServices”之外创建了一个“allServices”变量，在其中将数据传递给它，如下所示。问题是，当我在 de const onLoadService 中对其进行 console.log 时，它向我显示了整个对象，我也可以访问属性，但在外部它只显示了整个对象，但是当尝试访问属性时它失败了

    let allServices = {

  id: '',

  client_id: '',

  user_id: '',

  status: "",

  repair_value: "",

  taxes: "",

  service_code: "",

  has_client_paid: "",

  has_technician_paid: "",

  plate: "",

  brand: "",

  model: "",

  year: "",

  color: "",

  created_at: "",

  updated_at: ""

};

const Dashboard = () => {

  const classes = useStyles();

  const [filters, setFilters] = useState({});

  const [technicians, setTechnicians] = useState([]);

  useEffect(() => {

    onLoadSerivces();

    onLoadTechnicians();

  }, []);

  useEffect(() => {

  }, [filters]);

  const onLoadSerivces = async () => {

    try {

      const { data } = await api.get(`/service`);

      allServices = response.data.data

      console.log("first log  ", allServices[0])

    }

    catch (err) {

      let error = JSON.stringify(err.message);

      alert(error);

    }

  };

  console.log("Second log ", allServices[0])

如果我尝试在没有 [0] 的情况下打印对象，它会在两个 console.logs 中显示相同的内容...问题出在属性上。

错误消息“TypeError：无法读取未定义的属性‘状态’”

我做错了什么？

Answer 1

你做的一切都是正确的。当您登录“第二个 Console.log”时，该值尚未分配给您的变量，因为您将其设置在异步函数内部。如果您在代码中的任何位置使用此变量，只需在访问其中的属性之前检查它是否已设置。Edit1：不确定是否是这种情况，以及您得到什么样的响应，但也许尝试将其转换为 json，看看它是否有所作为。const response = await api.get(`/service`);const data = await response.json();Edit2：我想我明白发生了什么:) 当您第二次登录对象时，它尚未设置，因此当您尝试访问该值时 - 您会收到错误消息。您在登录对象本身时看到它的原因是因为您打印了对该对象的引用，因此如果它在几毫秒后被分配，它仍然会被打印。如果您第二次在没有参考的情况下打印它，很可能它仍然是空的，请尝试： console.log("second Console.log ", Object.assign({}, allServices))Edit3 要查看您是否正在设置值，请尝试执行以下操作，看看您是否能够使用它const Dashboard = () => {&nbsp; const [allServices, setAllServices] = useState();&nbsp; useEffect(() => {&nbsp; &nbsp; onLoadSerivces();&nbsp; }, []);&nbsp; const onLoadSerivces = async () => {&nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; const { data } = await api.get('/service');&nbsp; &nbsp; &nbsp; const result = response.data.data;&nbsp; &nbsp; &nbsp; console.log('first log&nbsp; ', result[0]);&nbsp; &nbsp; &nbsp; setAllServices(result);&nbsp; &nbsp; } catch (err) {&nbsp; &nbsp; &nbsp; const error = JSON.stringify(err.message);&nbsp; &nbsp; &nbsp; alert(error);&nbsp; &nbsp; }&nbsp; };&nbsp; // assume this will be an array&nbsp; render() {&nbsp; &nbsp; return allServices && allServices.map(service => {&nbsp; &nbsp; &nbsp; console.log('Second log ', service);&nbsp; &nbsp; &nbsp; return <div>{service.status}</div>;&nbsp; &nbsp; });&nbsp; }};