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

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

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为false，而&&右侧的JSX将被忽略。

为什么这有用？

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

Answer 2

我怎么读？这可能是在render（）或return（）中还没有提取数据吗？

是。因此undefined

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

2 个答案: