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

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 = () => {

  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>;

    });

  }

};