React 未呈现 - 无法读取未定义的属性

Question

我在第一次呈现我的应用程序时遇到了问题。我知道这个问题是因为最初我的 'const name' 是未定义的。当我将它设置为诸如字符串之类的内容时，应用程序将加载，然后我可以将原始代码放回原处，应用程序将按预期运行。但是如果我刷新，我会再次收到错误。这是我的代码：

const HomePage = (props) => {
    const name  = props.name.newMovement.movementName;
    const displayMovementButtons = () => {
        if (!name) {    
            return (
                <div className={classes.noMovementsMessage} >Click add button to begin</div> 
            )
        }

        return (
            <Button 
                className={classes.movementButtons}
                onClick={() => history.push('/movement/:id')}
            >   
                <div className={classes.movementName} >{name}</div>
            </Button>
        )
    };

所以，'name' 是未定义的开始。我如何重组我的代码，以便它进行初始渲染？

Answer 1

props.name 或 props.name.newMovement 未定义。如果您正在使用异步数据，则可能 name 属性在初始渲染时尚未设置。您可以尝试 Optional chaining 以便您的组件在未定义名称属性时不会立即抛出错误。

const name  = props.name?.newMovement?.movementName;

Answer 2

尝试{name ? name : ""} 这将检查名称是否为空。如果是这样，它打印 "" ，否则它打印任何名称

React 未呈现 - 无法读取未定义的属性

React not rendering - Cannot read property of undefined

reactjs

undefined

render

react-props

React 未呈现 - 无法读取未定义的 属性

React not rendering - Cannot read property of undefined

reactjs

undefined

render

react-props

React 未呈现 - 无法读取未定义的属性