Javascript Can'；访问函数外部的对象属性

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

    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]的情况下打印对象，它会在两个控制台中显示相同的内容。日志。。。问题在于中庭

错误消息“TypeError:无法读取未定义的属性'status'”

---

我做错了什么？

你做的每件事都是对的。当您登录到“second Console.log”时，由于您在异步函数中设置了变量，因此该值尚未分配给您的变量。如果您在代码中的任何地方使用此变量，只需在访问其内部属性之前检查是否已设置该变量

编辑1： 不确定是否是这种情况，以及您得到的是什么样的响应，但可以尝试将其转换为json，看看它是否有区别

const response = await api.get(`/service`);
const data = await response.json();

编辑2： 我想我理解了发生的事情：）当您第二次登录对象时，它还没有设置，所以当您试图访问该值时，您会得到一个错误。在对象本身中登录时看到它的原因是因为您打印了对对象的引用，所以如果在几毫秒后分配了它，它仍然会被打印

如果第二次打印时没有引用，很可能仍然是空的，请尝试：

console.log（“second console.log”，Object.assign（{}，allServices））

编辑3 若要查看您是否正在设置值，请尝试这样做，看看您是否能够使用它

const Dashboard = () => {
  const [allServices, setAllServices] = useState();

  useEffect(() => {
    onLoadSerivces();
  }, []);


  const onLoadSerivces = async () => {
    try {
      const { data } = await api.get('/service');
      const result = response.data.data;
      console.log('first log  ', result[0]);
      setAllServices(result);
    } catch (err) {
      const error = JSON.stringify(err.message);
      alert(error);
    }
  };


  // assume this will be an array
  render() {
    return allServices && allServices.map(service => {
      console.log('Second log ', service);
      return <div>{service.status}</div>;
    });
  }
};

const仪表板=（）=>{
const[allServices，setAllServices]=useState（）；
useffect（（）=>{
onLoadSerivces（）；
}, []);
const onLoadSerivces=async（）=>{
试一试{
const{data}=await-api.get（'/service'）；
const result=response.data.data；
console.log（'first log'，结果[0]）；
设置所有服务（结果）；
}捕捉（错误）{
const error=JSON.stringify（err.message）；
警报（错误）；
}
};
//假设这是一个数组
render（）{
返回allServices&&allServices.map（service=>{
console.log（“第二个日志”，服务）；
返回{service.status}；
});
}
};

你做的每件事都是对的。当您登录到“second Console.log”时，由于您在异步函数中设置了变量，因此该值尚未分配给您的变量。如果您在代码中的任何地方使用此变量，只需在访问其内部属性之前检查是否已设置该变量

编辑1： 不确定是否是这种情况，以及您得到的是什么样的响应，但可以尝试将其转换为json，看看它是否有区别

const response = await api.get(`/service`);
const data = await response.json();

编辑2： 我想我理解了发生的事情：）当您第二次登录对象时，它还没有设置，所以当您试图访问该值时，您会得到一个错误。在对象本身中登录时看到它的原因是因为您打印了对对象的引用，所以如果在几毫秒后分配了它，它仍然会被打印

如果第二次打印时没有引用，很可能仍然是空的，请尝试：

console.log（“second console.log”，Object.assign（{}，allServices））

编辑3 若要查看您是否正在设置值，请尝试这样做，看看您是否能够使用它

const Dashboard = () => {
  const [allServices, setAllServices] = useState();

  useEffect(() => {
    onLoadSerivces();
  }, []);


  const onLoadSerivces = async () => {
    try {
      const { data } = await api.get('/service');
      const result = response.data.data;
      console.log('first log  ', result[0]);
      setAllServices(result);
    } catch (err) {
      const error = JSON.stringify(err.message);
      alert(error);
    }
  };


  // assume this will be an array
  render() {
    return allServices && allServices.map(service => {
      console.log('Second log ', service);
      return <div>{service.status}</div>;
    });
  }
};

const仪表板=（）=>{
const[allServices，setAllServices]=useState（）；
useffect（（）=>{
onLoadSerivces（）；
}, []);
const onLoadSerivces=async（）=>{
试一试{
const{data}=await-api.get（'/service'）；
const result=response.data.data；
console.log（'first log'，结果[0]）；
设置所有服务（结果）；
}捕捉（错误）{
const error=JSON.stringify（err.message）；
警报（错误）；
}
};
//假设这是一个数组
render（）{
返回allServices&&allServices.map（service=>{
console.log（“第二个日志”，服务）；
返回{service.status}；
});
}
};

您在哪里使用

在线服务

？由于其

async

，程序将继续执行，并在检索结果之前执行

console.log

，我看不到函数

onLoadServices

的调用。您必须使用

wait

或

then

来处理异步代码我只是使用onLoadServices从de api获取数据。但是，为什么console.log会显示整个对象呢？我没有得到wait或then之类的东西，我用错了？因为我在代码中等待它，所以我认为您正在对数据进行分解，并再次调用它以获取data.data。api.get（'/service'）的预期输出是什么。我想从那里我们可以很容易地知道发生了什么。你在哪里使用

onLoadServices

？由于其

async

，程序将继续执行，并在检索结果之前执行

console.log

，我看不到函数

onLoadServices

的调用。您必须使用

wait

或

then

来处理异步代码我只是使用onLoadServices从de api获取数据。但是，为什么console.log会显示整个对象呢？我没有得到wait或then之类的东西，我用错了？因为我在代码中等待它，所以我认为您正在对数据进行分解，并再次调用它以获取data.data。api.get（'/service'）的预期输出是什么。我想从那里我们可以很容易地了解到底发生了什么。我明白了，但是如果a去掉allServices[0]。状态，并替换为allServices[0]，它会向我显示带有数据的对象，我得到一个对象作为响应，你的建议不起作用，我想是这样的，我尝试了你所说的，结果仍然是整个对象。当我第一次创建objet的时候，我也尝试过推广它，它也可以