无法读取 Reactjs 中未定义的属性答案

【问题标题】：Cannot read property of undefined in Reactjs无法读取 Reactjs 中未定义的属性
【发布时间】：2017-12-11 00:06:30
【问题描述】：

我尝试通过一些 ajax 请求读取一些数据，但我不确定我的代码是否正确。代码如下：

interface IProps {
  data: IScheduler;
}

interface IState {
  list: IScheduler;
}

export default class Page extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
        list: this.props.data,
    };
}

public componentWillMount() {
    this.getData();
}

public getData = () => {
  axios.get(myURL)
        .then( (response) => {
            this.setState({list: response.data});
            console.log(response.data.generatedDate); //works
        })
        .catch( (error) => {
            console.log("DIDN'T CATCH DATA", error);
        });
  }

public render(): JSX.Element {
    const data: IScheduler = this.state.list;

    // getting an error
    console.log(data.creationDate);

    return (
        <div className="container">
            <MyListCmp data={data}/>
        </div>
    );
}

我看到了错误：

Uncaught TypeError: Cannot read property 'list' of undefined

当我尝试时：

console.log(data); // or this.state.list

只是未定义。

数据示例：

{
   "generatedDate": "12.12.2017",
   "meetings": [

          ...
    ]
}

当我想读取 'meetings' 或 'generatedDate' 时，MyListCmp 中也会出现同样的错误：

Uncaught TypeError: Cannot read property 'generatedDate' of undefined
Uncaught TypeError: Cannot read property 'meetings' of undefined

如何阅读？这可能是在 render() 或 return() 中的数据尚未获取吗？

如果我这样做，我可以说：

 const data: IScheduler =  {
   generatedDate: "12.12.2017",
   meetings: [

          ...
    ]
}

它有效，但这不是重点。我需要从某个 URL 获取它。我会感激每一个建议。

【问题讨论】：

尝试在你的构造函数中绑定this.getData。通过在你的构造函数中添加这个this.getData = this.getData.bind(this)
@DhavalJardosh，谢谢，但没有帮助

标签： ajax reactjs typescript undefined axios

【解决方案1】：

这是一个尝试依赖一个值而不检查它或提供默认值的示例。你写道：

public render(): JSX.Element {
  const data: IScheduler = this.state.list;

  // getting an error
  console.log(data.creationDate);

render() 被提前调用，可能在响应有时间回来之前。您要做的是为其提供一种正确呈现的方式即使数据尚不可用。通常这意味着加载动画，但您也可以有条件地渲染数据：

{this.state.list && <MyMeetingList meetings={this.state.list} />}

为什么会这样？

上面是“只有在第一件事评估为真时才做第二件事”的常用捷径。如果this.state.list 未定义，则为假，因此表达式为short-circuit evaluated 为假，&& 右侧的 JSX 将被忽略。

为什么有用？

React render 函数被称为 lot。如果您想在某个时候尝试一个实验，请在render 中放置一个断点或在其中插入一个log。根据组件的复杂性及其数据更改的频率，您可能会对它触发的频率感到惊讶。这意味着它将在任何异步操作有时间完成之前至少被调用一次，并且您需要提前考虑它所需的任何值的合理默认值，或者（如上所述）测试它们是否存在。

【讨论】：

【解决方案2】：

如何阅读？这可能是在 render() 或 return() 中的数据还没有获取吗？

是的。因此undefined?

【讨论】：