题意：

ERROR Cannot read properties of undefined (reading 'temp') TypeError: Cannot read properties of undefined (reading 'temp')

错误：无法读取未定义的属性（读取 'temp'） TypeError：无法读取未定义的属性（读取 'temp'）

问题背景：

So this is my code (react, redux-toolkit) and I am getting that error.

这是我的代码（React，redux-toolkit），并且我收到了那个错误。

import { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import styles from "./styles.module.css";
import { getCurrentWeather } from "../../Redux/Reducers/currentWeatherSlice";
import { getUserPosition } from "../../Redux/Reducers/userPositionSlice";

// URLFor the icons
// https://openweathermap.org/img/wn/${}.pngs

function CurrentWeather() {
  const dispatch = useDispatch();
  const currentWeather = useSelector(
    (state) => state.currentWeather.currentWeather
  );
  const userPosition = useSelector((state) => state.userPosition.userPosition);

  const [query, setQuery] = useState("");
  const [x, setX] = useState(null);
  const [y, setY] = useState(null);

  //Get user's Position
  useEffect(() => {
    const successHandler = (position) => {
      setX(position.coords.latitude);
      setY(position.coords.longitude);
    };
    navigator.geolocation.getCurrentPosition(successHandler);

    if (x && y !== null) {
      dispatch(getUserPosition({ x, y }));
    }
  }, [dispatch, x, y]);

  const handleCitySearch = (e) => {
    setQuery(e.target.value);
  };

  const handleForm = (e) => {
    e.preventDefault();
  };

  const handleCityFetch = () => {
    dispatch(getCurrentWeather(query));
    setQuery("");
  };

  console.log(userPosition);

  return (
    <div className={styles.container}>
      <h1>CurrentWeather</h1>
      <div className={styles.currentWeather_container}>
        <div className={styles.input_container}>
          <form onSubmit={handleForm} className={styles.form}>
            <input
              value={query}
              type="text"
              placeholder="Search City"
              onChange={handleCitySearch}
            />
            <button onClick={handleCityFetch}>Go</button>
          </form>
        </div>

        <div className={styles.top_section}>
          {x && y && userPosition && (
            <>
              <div>
                <p>{userPosition.name}</p>
                <p>{userPosition.visibility}</p>
              </div>
              <div>
                <span>{userPosition?.main.temp}</span>
                <span>°C</span>
              </div>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

export default CurrentWeather;

Even though it works as expected with the userPosition.name when I try to render userPosition.main.temp I'm getting the error.

尽管在渲染 userPosition.name 时按预期工作，但当我尝试渲染 userPosition.main.temp 时，我遇到了错误。

I am not sure if its a redux state problem or that I'm trying to render before I get the data (even though it seems that I do have the data).

我不确定这是 Redux 状态的问题，还是我在获取数据之前就尝试渲染（尽管看起来我确实已经拿到了数据）。

I've tried multiple solutions such as moving the state for the userPosition to its own slice, using the Optional Chaining operator on userPosition, also I had a bunch of console logs everywhere but I can't find my mistake.

我尝试了多种解决方案，比如将 userPosition 的状态移到自己的切片，使用可选链操作符 (Optional Chaining) 来访问 userPosition，还在各处添加了很多 console.log，但我还是找不到我的错误。

问题解决：

You've placed the null-check on the wrong object. The error is informing you that userPosition.main is undefined. This access is fine though, same as userPosition.name and userPosition.visibility. No error is thrown since userPosition is defined. The issue arises when userPosition.main is undefined and the code attempts to access the temp property

你将 null 检查放在了错误的对象上。错误提示告诉你 userPosition.main 是未定义的。不过，像 userPosition.name 和 userPosition.visibility 这样的访问是没有问题的，因为 userPosition 已经定义了。问题出现在 userPosition.main 是未定义的情况下，代码尝试访问 temp 属性时。

{x && y && userPosition && (
  <>
    <div>
      <p>{userPosition.name}</p>       // ok, value is undefined
      <p>{userPosition.visibility}</p> // ok, value is undefined
    </div>
    <div>
      <span>
        {userPosition?.main.temp}  // not ok, accessing undefined object
      </span>
      <span>°C</span>
    </div>
  </>
)}

Since the code has already checked above that to ensure userPosition is truthy, move the null-check onto the potentially null/undefined main property.

由于代码已经在上面检查了 userPosition 是否为真值，因此将 null 检查移到可能为 null 或 undefined 的 main 属性上。

{x && y && userPosition && (
  <>
    <div>
      <p>{userPosition.name}</p>       // ok, value is undefined
      <p>{userPosition.visibility}</p> // ok, value is undefined
    </div>
    <div>
      <span>
        {userPosition.main?.temp}  // ok, value is undefined or temp
      </span>
      <span>°C</span>
    </div>
  </>
)}