Question

我正在对google fonts api进行ajax调用，并从那里收到一个项目列表。我在componentDidMount方法中调用了我的ajax调用。

我后来有一个方法可以为我从ajax请求收到的字体呈现一个选项字段。我不确定我做错了什么。

  componentDidMount() {

    axios.get(URL)
      .then((data) => {
        console.log("data" + data);
        this.setState({
          googleFonts: data
        })
      })
      .catch((err) => {
        console.log(err);
        this.setState({
          errors: err
        })
      })
  }

这是我渲染选项的地方

 renderFonts() {

    let data = this.state.googleFonts.data.items;
    return data.map((font, index) => {
      return (
        <option>{font.family}</option>
      )
    })
  }

这里我调用我的方法返回选项

<FormControl
                    style={inputFieldStyle}
                    componentClass="select"
                    placeholder="select"

                  >

                    {this.renderFonts()}

                  </FormControl>

我得到的错误是数据未明确定义this.state.googleFonts.data.items。我认为这与我的componentDidMount ajax调用的竞争条件和之前调用的方法有关。我究竟做错了什么？

Answer 1

看起来您正在尝试访问尚未异步获取的属性并收到Cannot read property of undefined错误。

在renderFonts方法的最开始，您可以添加以下行：

if (!this.state.googleFonts) return null;

这样，在定义this.state.googleFonts之前，您不会尝试访问_.get的属性。解析API调用后，将使用正确的值重新呈现组件。

您的另一个选择是使用lodash undefined，它会返回undefined而不是在您尝试访问... var index = require('./routes/index'); var auth = require('./routes/auth'); var app = express(); ... app.use('/', index); app.use('/auth', auth); ... // catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); });的属性时抛出错误。

映射ajax调用中的项目反应

1 个答案: