TypeError：无法读取反应中未定义的属性“子字符串”答案

【问题标题】：TypeError: Cannot read property 'substring' of undefined in reactTypeError：无法读取反应中未定义的属性“子字符串”
【发布时间】：2020-08-30 21:04:13
【问题描述】：

我正在尝试缩短从反应中的 API 调用获得的反应组件中的字符串，但我得到 TypeError: Cannot read property 'substring' of undefined。

这里是sn-p：

shorten(){
    let res = this.props.details.substring(100, 0);
    return res;
}

我在渲染返回函数中使用该函数：

    render(){
        return (
            <div>
                <p className="text-muted font1-1">{this.shorten()}</p>
            </div>
        );
    }

错误代码：

TypeError: Cannot read property 'substring' of undefined

【问题讨论】：

你的 details 道具没有价值。
它有一个值，我通过控制台登录确认。
您从 API 中获得了价值。所以你的价值一开始是不确定的。当 API 返回后，你得到了值，你在控制台中看到了这个结果，但是当 react 第一次渲染你的组件时，details 属性没有值。

标签： javascript reactjs

【解决方案1】：

去掉shortcut方法试试这个

render(){
    const shorten = this.props.details ? this.props.details.substring(0, 100) : '';
        return (
            <div>
                <p className="text-muted font1-1">{shorten}</p>
            </div>
        );
    }

【讨论】：

【解决方案2】：

您是否尝试过 console.log 缩短的值？您是否也在控制台中未定义？

如果是这样，您是否可能没有等待 API 值。

你熟悉 promise 的概念吗？我的假设是你得到 undefined 因为你试图在没有 async/await 的情况下查看结果（或其他方式来等待 promise 被解决），这意味着你正在尝试读取它之前的值确实存在，这就是为什么你得到未定义的原因

【讨论】：

console.log 中缩短值的值按预期工作。显然我必须先检查空值。谢谢。
是的，因为 React 生命周期重要的是你得到了解决方案，祝你有美好的一天 =)

【解决方案3】：

在使用substring之前添加一个空检查，像这样：let res = this.props.details && this.props.details.substring(100,0);

【讨论】：

谢谢，现在我知道由于 React 的渲染方式，我必须检查 null。

【解决方案4】：

如果您确定 prop 已通过，则可能存在导致 this.props.details 未定义的父级状态。

有 3 个解决方案。

通过道具时，您可以添加支票

<YourComponent details={this.state.whatever || '' } />

可以在组件内部查看

let res = this.props.details && this.props.details.substring(100, 0);

在传递所有必需的道具并定义它们之前，不要渲染组件。

【讨论】：

谢谢，我遵循了类似的解决方案。问题解决了。