Question

我有以下组件：

Cannot assign to read only property 'validated' of object '#<Object>'

对于默认情况，有时我的代码会引发以下React错误：

TypeError: Cannot assign to read only property 'validated' of object '#

<Object>'
validateChildKeys
node_modules/react/cjs/react.development.js:1136
  1133 | } else if (isValidElement(node)) {
  1134 |   // This element was passed in a valid location.
  1135 |   if (node._store) {
> 1136 |     node._store.validated = true;
  1137 |   }
  1138 | } else if (node) {
  1139 |   var iteratorFn = getIteratorFn(node);

报告错误位于React模块中：

{ props.createAgainButton && props.createAgainButton }

我不确定为什么。我尝试将倒数第二个表达式更改为：

// @flow
import React  from 'react'
import {connect} from 'react-redux'
import {Alert} from '../../ui/coreUIComponents'
import type {AlertType} from '../misc/types'

const mapStateToProps = (state) => {
    return {
        message: state.alert.message,
        danger: state.alert.danger,
        createAgainButton: state.alert.createAgainButton
        }
}

export default connect(mapStateToProps)(

    (props: {message: string, danger: boolean, createAgainButton?: Object}) =>
    {
        window.scrollTo(0,0);                                    
        const type: AlertType = props.danger? "Warning" : "Message"

        return (
            props.message ? <div>
                { props.createAgainButton ?
                    <Alert message={props.message} type={type} createAgainButton={props.createAgainButton} />
                :
                    <Alert message={props.message} type={type}  />
                }
            </div>
            :
                <div></div>
        )
    }
)

这里我在这种情况下使用Alert组件：

{{1}}

我想知道是否有任何明显的错误。在异步调用上传数据后显示警报。有时，它需要显示一个按钮来创建另一条记录。该功能由包装底层记录组件的HoF提供。它适用于某些人，但不适用于其他人。有什么想法吗？

菲尔

Answer 1

我知道这是一个古老的问题，但也许现在有人发现了。我们的代码库中发生了类似的事情。我只想说我们的原因是什么。

简而言之，状态中存储了react个JSX元素，而我们使用的immer本质上是冻结存储中的所有内容，因此component._store属性也被设置为只读-导致react的开发版本在子键验证步骤上失败。

如我所见，您还将createAgainButton存储在某个地方，也许它来自商店，您的中间件之一可能使它不可变。

解决方案：不要在您的商店中存储JSX。如果需要，则不要使用immer，但是如果需要，则不要使用react的开发版本。

反应错误 - 无法分配给只读属性＆＃39;已验证＆＃39;对象＆＃39;＃<对象>＆＃39;

1 个答案: