无法通过 React jsx 传递状态值。收到错误 - 意外令牌：'this'

Question

以下代码将 state 键初始化为 NULL 并在安装组件时为它们分配特定值。（一切正常）

问题在于在 render 函数中访问这些状态值。在 Map 组件中， initialCenter 属性以一个对象作为值。这是我传递状态值并收到以下错误的地方。

编译失败 ./src/components/Mapcontainer.js 第 32:21 行：解析错误：意外关键字 'this'

export class MapContainer extends Component {
  constructor() {
    super();
    this.state = {
      lat: null,
      lng: null,
    };
  }
  componentDidMount() {
    navigator.geolocation.watchPosition((position) => {
      this.setState({
        lat: position.coords.latitude,
        lng: position.coords.longitude,
      });
    });
  }
  render() {
    return (
      <Map
        google={this.props.google}
        zoom={14}
        style={mapStyles}
        initialCenter={{
          lat: {this.state.lat},
          lng: {this.state.lng},
        }}
      >
      <Marker />
      </Map>
    );
  }
}

Answer 1

initialCenter={{
   lat: {this.state.lat},
   lng: {this.state.lng},
}}

应该是

initialCenter={this.state}

或

initialCenter={{
   lat: this.state.lat,
   lng: this.state.lng
}}

因为在前面的例子中你会有嵌套的对象。而 lat: {this.state.lat} 会导致语法错误，因为 {this.state.lat} 会导致对象没有键。

Answer 2

无需将 javascript 代码再次包裹在 lat: {this.state.lat} 或 lng: {this.state.lng} 的花括号中。就这样做

<Map
        google={this.props.google}
        zoom={14}
        style={mapStyles}
        initialCenter={{    // one for expression evaluation and one for object literal
          lat: this.state.lat,
          lng: this.state.lng,
        }}
      >

有关更多说明，请参阅以下 Whosebug 线程。

what-is-the-purpose-of-double-curly-braces-in-reacts-jsx-syntax.

无法通过 React jsx 传递状态值。收到错误 - 意外令牌：'this'

Unable to pass state value through react jsx. Getting error - Unexpected token : 'this'

javascript

reactjs

jsx

react-state-management

react-state