Question

我正在使用具有反应的axios从数据库请求json数据。我能够获取json并将其分配给state并将其作为道具传递给我的app中的子组件。我遇到的问题是json中的某些对象以“@”符号开头并引发语法错误。

    var Events = React.createClass({
    getInitialState: function() {
    return {
      events: [],
    }
  },
  componentDidMount: function() {
    var _this = this;
    this.serverRequest = 
      axios
        .get("MY URL STRING HERE")
        .then(function(result) {
          _this.setState({
            events: result.data
          });
        })
  },
  componentWillUnmount: function() {
    this.serverRequest.abort();
  },
    render: function() {
        return (
            <div>
                {this.state.events.map(function(event) {
                    return (
                        <div>
                            <Event title={event.EventTitle} date={event.EventDate} description={event.EventDescription} presentor={event.EventPresenters} location={event.EventLocation} registered={event.registeredusercount} max_reg={event.EventMaximumAttendees} key={event.@unid} id={key} status={event.status} />
                        </div>
                    ) 
                })};
            </div>
        )
    }
});

Answer 1

我假设您的问题不是解析数据，而是使用React将对象作为道具传递下去？如果是这样，您应该能够通过字符串动态with bracket notation访问属性，如此。

let foo = {'@bar': 'test'};
foo.@bar;
// => Uncaught SyntaxError: Invalid or unexpected token

foo['@bar'];
// => 'test'

对于您的组件，它将是：

<Event key={event['@unid']} />

如何将带有@符号的JSON传递给React中的props

1 个答案: