“无法读取未定义 (React.js) 的属性‘地图’”

Question

我收到“无法读取未定义的属性 'map'”错误。我一直在查看人们发布的类似问题中提供的一些示例，但仍然没有运气。任何猜测

背景：我在一个 3 人团队中，该团队正在开发一个应用程序，该应用程序允许用户查看组中每个人在地图上的位置。我的角色尤其是尝试加入一个聊天界面。我决定使用 socket.io。

 import React, { Component } from 'react';
  // import Chat from "./Chat";
  // import logo from './logo.svg';
  import FacebookLogin from 'react-facebook-login';
  import GoogleLogin from 'react-google-login';
  import Sidebar from "react-sidebar";


  import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps- 
  react';

  import './App.css';
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        sidebarOpen: true
      };
      this.onSetSidebarOpen = this.onSetSidebarOpen.bind(this);
    }

    onSetSidebarOpen(open) {
      this.setState({ sidebarOpen: open });
    }
    render() {
      const responseFacebook = (response) => {
        console.log(response);
      }

      const responseGoogle = (response) => {
        console.log(response);
      }


      return (
        <div className="App">
          <Sidebar
            sidebar={<b>
              <div
                style={{ padding: 40 }}>
                <br />
                <FacebookLogin
                  appId=""
                  fields="name,email,picture"
                  callback={responseFacebook}
                />
                <br />
                <br />

                <GoogleLogin
                clientId=""
                buttonText="Login with Google"
                onSuccess={responseGoogle}
                onFailure={responseGoogle}
              />
            </div>
            <div class="btn-group">
              <button type="button" class="btn btn-dark dropdown-toggle" data- 
 toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
                My Groups <i class="fas fa-users"></i>
              </button>
              <div class="dropdown-menu dropdown-menu-lg-right">
                <button class="dropdown-item" type="button">Action</button>
                <button class="dropdown-item" type="button">Another action</button>
                <button class="dropdown-item" type="button">Something else here</button>
              </div>
            </div>

            <br />
            <br />
            <hr />

            <div class="btn-group">
              <button type="button" class="btn btn-dark">
                Current Group <i class="fas fa-users"></i>
              </button>
              <div class="dropdown-menu dropdown-menu-lg-right">
                <button class="dropdown-item" type="button">Action</button>
                <button class="dropdown-item" type="button">Another action</button>
                <button class="dropdown-item" type="button">Something else here</button>
              </div>
            </div>
            <br />
            <i class="fas fa-user-circle fa-3x" style={{ marginRight: 5, marginTop: 10 }}></i>
            <i class="fas fa-user-circle fa-3x" style={{ marginRight: 5, marginLeft: 10, marginTop: 5 }}></i>
            <i class="fas fa-user-circle fa-3x" style={{ marginLeft: 5, marginTop: 10 }}></i>
            <br />
            <br />
            <br />
            <div className="messages">
              {this.state.messages.map(message => {
                return (
                  <div>{message.author}: {message.message}</div>
                )
              })}
            </div>
            {/* <form>
                <div class="form-group">
                <button style={{marginBottom: 10}} type="button" class="btn btn-dark">Chat <i class="far fa-comment-alt" style={{marginLeft: 5}}></i></button>

                  <textarea style={{padding: 10}} class="form-control" 
  id="exampleFormControlTextarea1" rows="3"></textarea>
                  </div>
                </form> */}
            </b>}
            open={this.state.sidebarOpen}
            onSetOpen={this.onSetSidebarOpen}
            styles={{ sidebar: { background: "white" } }}
          >
            <button onClick={() => this.onSetSidebarOpen(true)}>
             Open sidebar
          </button>
          </Sidebar>
         <br />
          <br />
          <Map google={this.props.google} zoom={14}>

            <Marker onClick={this.onMarkerClick}
              name={'Current location'} />

            <InfoWindow onClose={this.onInfoWindowClose}>

            </InfoWindow>
          </Map>
        </div>

      );
    }
  }



  export default GoogleApiWrapper({
    apiKey: `${process.env.REACT_APP_GOOGLE_MAPS_API_KEY}`
  })(App)

Answer 1

这可能意味着该状态没有被填充messages 键处的值。

您正在尝试映射 this.state.messages 的值，但似乎没有设置。

              {this.state.messages.map(message => {

如果this.state.messages 未定义，那么您将无法在其上运行.map（.map 是特定于数组的函数）。

您将需要检查您的代码，以确保在尝试映射之前将messages 设置为正确状态。希望对您有所帮助。

Answer 2

您的代码没有

this.setState({messages:[{ // set a state to populate values in JSX

 author:"author1" // populate values based on your Queries

}]}) // An object inside Array which provides .map() function (every array has .map() inbuilt function)

每当你在 Javascript 中看到 Undefined 时，底层的 this.state.messages 就没有任何值，因为它会导致 Undefined 在 .map() 函数