React 状态变量有时为空

Question

我刚开始使用 React 项目，在我问之前想说这只是我的爱好 :) 我正在建立自己的小型网站以提供教育支持，但我现在遇到了一个问题，我无法解释为什么它不起作用

这是我的一些masterData的编辑页面的完整代码：

    const FormHelperBoxType = ({
      auth,
      dataToEdit: { dataContent, imageLink },

      setDataToEdit,
      setimageLink,
      saveImageToObject,
      dataClear,
    }) => {
      const url = clientConfig.backendHOST + '/api/masterData';
      const urlEnd = '/HelperBoxType';
      const dataSource = createStore({
        API data source for DevExpress component works fine.
      });

  var myWidget = window.cloudinary.createUploadWidget(
    {
      //cloudinary authentication
    },
    (error, result) => {
      if (!error && result && result.event === 'success') {
        console.log('Done! Here is the image info: ', result.info);
        
        setimageLink(result.info);
      }
    }
  );

    return <Button text='Test' onClick={buttonClick} />;
      );

      const renderButton = function (props) {
        function buttonClick(e) {
          setDataToEdit(props.data);
          myWidget.open();
        }

        return <Button text='Test' onClick={buttonClick} />;
      };

      const onSaving = React.useCallback((e) => {
        console.log(dataContent, imageLink);
        var updData = {
          helperboxTypeId: dataContent.helperboxTypeId,
          image: imageLink.secure_url,
        };

        const body = JSON.stringify(updData);
        console.log('data sent to API', updData);
        saveImageToObject(updData, url + urlEnd);
      }, []);

  
      return (
        <Fragment>
          // data grid from DevExpress works fine
        </Fragment>
      );
    };

    FormHelperBoxType.propTypes = {
      auth: PropTypes.object.isRequired,
      dataToEdit: PropTypes.object.isRequired,

      setDataToEdit: PropTypes.func.isRequired,
      dataClear: PropTypes.func.isRequired,
      setimageLink: PropTypes.func.isRequired,
      saveImageToObject: PropTypes.func.isRequired,
    };

    const mapStateToProps = (state) => ({
      auth: state.auth,
      dataToEdit: state.dataToEdit,
    });

    export default connect(mapStateToProps, {
      setDataToEdit,
      dataClear,
      setimageLink,
      saveImageToObject,
    })(withRouter(FormHelperBoxType));

我的问题是我需要扩展 DevExpress GRid 控制器的默认保存方法，该方法在 onSaving 中完成。在此之前，在 editPopup 上我有一个小部件按钮。通过按此按钮，我将编辑的行存储到 dataToEdit （整个记录）中。如果图片上传正常，那么我将图片的公共链接存储到 imageLink 在 redux 开发人员控制台中，我看到它们设置正确的值。 现在开始有趣的事情......在 30% 的情况下它可以正常工作，但在大多数情况下我得到一个错误：

Uncaught TypeError: Cannot read property 'helperboxTypeId' of null

当我分配给 updData 时，这发生在 onSaving 方法中：

     var updData = {
      helperboxTypeId: dataContent.helperboxTypeId,
      image: imageLink.secure_url,
    };

如果我在此之前放置一个 console.log(dataContent, imageLink); 它会有所帮助和工作...

什么是我没有得到的？或者我做错了什么？ :) （reducer 等正在工作，我可以在 devTools 中正确看到这些值。）

Answer 1

这取决于您使用的 ES 版本。

第一个想法：（根据您的环境可能会失败）

与上一年相比的一个变化是可选链接：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

var updData = {
  helperboxTypeId: dataContent?.helperboxTypeId,
  image: imageLink?.secure_url,
};

第二个想法：

您可以设置默认值（空对象。因此，它不会破坏您的运行）。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

const FormHelperBoxType = ({
  auth,
  dataToEdit: { dataContent = {}, imageLink = {} },
  setDataToEdit,
  setimageLink,
  saveImageToObject,
  dataClear,
}) => {