反应有时不渲染按钮？

Question

I'm just starting to learn React and how to integrate it with different APIs. What my page does right now is it grabs information from input fields and React should render it in a view section. However, sometimes (if I keep refreshing) the button that React is supposed to render doesn't show up and returns the error:

Uncaught TypeError: Cannot read property 'map' of undefined

Also, I inspected the HTML and there's one empty div before all the divs for the user's information. What I'm trying to achieve so far works but only if the "Add Information" button decides to show up.

I uploaded it here if it helps to visualize my problem: testing.nicholasdrzewiecki.ca - if you keep refreshing sometimes the "Add Information" button doesn't appear. The Facebook login isn't set up but click it to show the create button which makes the inputs, fill the inputs with random info and click "Add Information".

My babel code looks like this:

// jshint ignore: start

/* React Module */
var DisplayInformation = React.createClass({
  addUserInfo: function() {
    this.props.funcAddUser(document.getElementById("inputName").value);
    this.props.funcAddUser(document.getElementById("inputTitle").value);
    this.props.funcAddUser(document.getElementById("inputStatus").value);
    this.props.funcAddUser(document.getElementById("inputLatitude").value);
    this.props.funcAddUser(document.getElementById("inputLongitude").value);
  },

  render: function() {
    console.log(this.props.list);

    var self = this;
    var arr = self.props.list.map(function(obj) {
      return (
        <div>{obj.name}</div>
      )
    });

    return (
      <div>
        {arr}
        <button onClick={this.addUserInfo}>Add Information</button>
      </div>
    );
  }
});

var Container = React.createClass({
  getInitialState: function() {
    return {
      ulist: window.userInformation
    }
  },

  addUser: function(name, title, status, latitude, longitude) {
    var obj = {
      name: name,
      title: title,
      status: status,
      latitude: latitude,
      longitude: longitude
    }
    this.state.ulist.push(obj);
    this.setState({
      ulist: this.state.ulist
    });
  },

  render: function() {
    return (
      <div>
        <DisplayInformation list={this.state.ulist} funcAddUser={this.addUser} />
      </div>
    )
  }
});

ReactDOM.render(
  <Container />,
  document.getElementById("displayReact")
);

And my other JavaScript file with the Facebook and Google Maps API looks like this:

/* jshint loopfunc: true */

$(document).ready(function() {

    var buttonFacebookLogin = document.getElementById("buttonFacebookLogin");
    var buttonCreate = document.getElementById("buttonCreate");
    var buttonView = document.getElementById("buttonView");
    var inputName = document.getElementById("inputName");
    var inputTitle = document.getElementById("inputTitle");
    var inputImage = document.getElementById("inputImage");
    var inputStatus = document.getElementById("inputStatus");
    var inputLatitude = document.getElementById("inputLatitude");
    var inputLongitude = document.getElementById("inputLongitude");
    var storeInformation = document.getElementById("storeInformation");
    var displayInformation = document.getElementById("displayInformation");
    var map;

    var arrayInformation = [];

    window.facebookUserInformation = {
        name: "",
        picture: ""
    };

    window.userInformation = [{

    }];

    buttonCreate.onclick = function() { // When create is clicked on, under the display view, show a blank text input and a button.
        inputName.style.display = "inline-block";
        inputTitle.style.display = "inline-block";
        inputImage.style.display = "inline-block";
        inputStatus.style.display = "inline-block";
        inputLatitude.style.display = "inline-block";
        inputLongitude.style.display = "inline-block";
        storeInformation.style.display = "inline-block";
    };

    storeInformation.onclick = function() { // When the button is clicked on, push the value into an array.
        var objectInformation = {
            _name: inputName.value,
            _title: inputTitle.value,
            _image: "<img src='" + inputImage.value + "'/>",
            _status: inputStatus.value,
            _latitude: inputLatitude.value,
            _longitude: inputLongitude.value
        };
        arrayInformation.push(objectInformation);
        inputImage.value = "";
        inputName.value = "";
        inputTitle.value = "";
        inputStatus.value = "";
        inputLatitude.value = "";
        inputLongitude.value = "";
    };

    function viewInformation(number) { // When view is clicked on, loop through the array and display all the items. Beside each item are an edit button and a delete button.
        var informationDiv = document.createElement("div");
        displayInformation.appendChild(informationDiv);
        informationDiv.innerHTML = arrayInformation[number]._image + " " + arrayInformation[number]._name + " " + arrayInformation[number]._title + " " + arrayInformation[number]._status;

        // Beside each item are an edit button and a delete button.
        var buttonEdit = document.createElement("button");
        buttonEdit.type = "button";
        buttonEdit.setAttribute("class", "btn btn-default");
        buttonEdit.innerHTML = "Edit";
        buttonEdit.dataset.indexValue = number;
        informationDiv.appendChild(buttonEdit);

        var buttonDelete = document.createElement("button");
        buttonDelete.type = "button";
        buttonDelete.setAttribute("class", "btn btn-default");
        buttonDelete.innerHTML = "Delete";
        buttonDelete.dataset.indexValue = number;
        informationDiv.appendChild(buttonDelete);

        buttonDelete.onclick = function() { // When delete is clicked on, remove the item from the array.
            var buttonDeleteIndex = this.dataset.indexValue;
            arrayInformation.splice(buttonDeleteIndex, 1);
            displayInformation.innerHTML = "";
            for (var i = 0; i < arrayInformation.length; i++) {
                viewInformation(i);
            }
        };

        buttonEdit.onclick = function() {
            var buttonEditIndex = this.dataset.indexValue;
            displayInformation.innerHTML = "";
            arrayInformation[buttonEditIndex] = {
                _image: arrayInformation[buttonEditIndex]._image,
                _name: "<input value='" + arrayInformation[buttonEditIndex]._name + "'/>",
                _title: "<input value='" + arrayInformation[buttonEditIndex]._title + "'/>",
                _status: "<input value='" + arrayInformation[buttonEditIndex]._status + "'/>"
            };
            for (var i = 0; i < arrayInformation.length; i++) {
                viewInformation(i);
            }
        };
    }

    buttonView.onclick = function() {
        displayInformation.innerHTML = "";
        for (var i = 0; i < arrayInformation.length; i++) {
            viewInformation(i);
        }
        initMap();
    };

    // Facebook
    window.fbAsyncInit = function() {

        FB.init({appId: '173223693137232', xfbml: true, version: 'v2.8'});

        $("#buttonFacebookLogin").click(function() {
            $(this).hide();
            $("#buttonCreate").show();
            $("#buttonView").show();
            FB.login(function(response) {
                if (response.status == 'connected') {
                    FB.api("/me?fields=name,picture", function(userResponse) {
                        window.facebookUserInformation.name = userResponse.name;
                        window.facebookUserInformation.picture = userResponse.picture.data.url;
                        inputName.value = window.facebookUserInformation.name;
                        inputImage.value = window.facebookUserInformation.picture;
                    });
                } else {
                    return false;
                }
            });
        });
    };

    (function(d, s, id) {
        var js,
            fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
            return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    // Google Maps
    function initMap() {
        map = new google.maps.Map(document.getElementById("map"), {
            center: {
                lat: parseInt(arrayInformation[(arrayInformation.length - 1)]._latitude),
                lng: parseInt(arrayInformation[(arrayInformation.length - 1)]._longitude)
            },
            zoom: 5
        });
        for (var i = 0; i < arrayInformation.length; i++) {
            var marker = new google.maps.Marker({
                position: {
                    lat: parseInt(arrayInformation[i]._latitude),
                    lng: parseInt(arrayInformation[i]._longitude)
                },
                map: map
            });
        }
    }

});

And HTML for context:

<!DOCTYPE html>

<html>

<head>
    <title>Control Panel</title>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
    <link rel='stylesheet' href='css/style.css'>
</head>

<body>

    <div class='flex-container'>

        <div class='flex-item'>
            <div class='container'>
                <div class='well well-lg'>
                    <div class='btn-group' role='group'>
                        <button id='buttonFacebookLogin' type='button' class='btn btn-default'>Login with Facebook</button>
                        <button id='buttonCreate' type='button' class='btn btn-default'>Create</button>
                        <button id='buttonView' type='button' class='btn btn-default'>View</button>
                    </div>
                    <div class='input-group'>
                        <input id='inputImage' type='text' class='form-control' placeholder='Image'>
                        <input id='inputName' type='text' class='form-control' placeholder='Name'>
                        <input id='inputTitle' type='text' class='form-control' placeholder='Title'>
                        <input id='inputStatus' type='text' class='form-control' placeholder='Status'>
                        <input id='inputLatitude' type='number' min='-85' max='85' class='form-control' placeholder='Latitude'>
                        <input id='inputLongitude' type='number' min='180' max='180' class='form-control' placeholder='Longitude'>
                        <span class='input-group-btn'>
                          <button id='storeInformation' class='btn btn-default' type='button'>Store Information</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class='flex-item'>
            <div class='container'>
                <div id='displayInformation' class='well well-lg'></div>
                <div id='displayReact' class='well well-lg'></div>
                <div id='map'></div>
            </div>
        </div>

    </div>

    <!-- Scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyAGZd9Y2YB7omGFkeeS0Y6QQOi8pXAs3Ag'></script>
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>
    <script src='js/script.js'></script>
    <script src="js/babel.js" type="text/babel"></script>
</body>

</html>

Answer 1

Button doesn't show because self.props.list is undefined. You should use default props https://facebook.github.io/react/docs/typechecking-with-proptypes.html#default-prop-values or write:

(self.props.list || []).map(function...

(Default props are more elegant)