React - 无法在输入更改时设置状态

Question

我不是新的反应，但由于某种原因，我收到了这个错误，我无法清除它：

错误：无法读取 null 的属性“值”

代码：

const [platform, setPlatform] = React.useState(0);
  const [socialLinksState, setSocialLinksState] = useState({
    instagram: socialLinks?.instagram || "",
    linkedIn: socialLinks?.linkedIn || "",
    youtube: socialLinks?.youtube || "",
  });
  const socialLinksInputHandler = (e) => { 
    if (platform === 0) {
      setSocialLinksState((oldState) => ({
        ...oldState,
        instagram: e.target.value,  // <=== here (it says target is NULL)
      }));
    }
  };


// input field 

 <input
  onChange={(e) => socialLinksInputHandler(e)} //  <=== invoking the function
  value={
    platform === 0
              ? socialLinksState.instagram
              : platform === 1
              ? socialLinksState.linkedIn
              : platform === 2 && socialLinksState.youtube
  }
  placeholder={
    platform === 0
              ? "Instagram URL"
              : platform === 1
              ? "Linkedin Url"
              : platform === 2 && "Youtube Url"
  }
/>

我想知道我在这里缺少什么，提前谢谢！

Answer 1

错误在下面部分

 value={
    platform === 0
              ? socialLinksState.instagram
              : platform === 1
              ? socialLinksState.linkedIn
              : platform === 2 && socialLinksState.youtube
  }

如果 socialLinksState 或 socialLinksState 是 undefined / null 那么它会抛出错误。为了避免这种情况，你可以得到 lodash 的帮助。

import _ from 'lodash'

...
...
...
 value={
        platform === 0
                  ? _.get(socialLinksState,'instagram','')
                  : platform === 1
                  ? _.get(socialLinksState,'linkedIn','')
                  : platform === 2 && _.get(socialLinksState,'youtube','')
      }

还要避免深度嵌套的三元运算符，在 render 方法中使用 else if 并使用最终值。