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

Question

我试图通过一些 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 中获取它。我会感激每一个建议。

Answer 1

How can I read it? Is this possible that in render() or return() data hasn't fetched yet?

是的。因此 undefined

Answer 2

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

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} />}

为什么这样做？

以上是"only do the second thing if the first thing evaluates truthy"的常用快捷方式。如果 this.state.list 未定义，则为假，因此表达式 short-circuit evaluated 为假，&& 右侧的 JSX 将被忽略。

为什么有用？

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

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

Cannot read property of undefined in Reactjs

ajax

undefined

typescript

reactjs

axios

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

Cannot read property of undefined in Reactjs

ajax

undefined

typescript

reactjs

axios

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