ReactJS Реквизит и барботаж

0

Мне трудно понять, почему я не могу сделать что-то подобное.

loadPostsFromServer: function() {
    $.ajax({
        url: '/allPosts',
        dataType: 'json',
        success: function(data) {
            console.log(data);
            this.setState({posts:data, items:data});
            //this.setState({items:data});
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(this.props.url,status, err.toString());
        }.bind(this)
    });
},

loadUserFromServer: function() {
    $.ajax({
        url: '/user',
        dataType: 'json',
        success: function(data) {
            this.setState({user:data.local});
            //console.log(this.state.user);
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(this.props.url,status, err.toString());
        }.bind(this)
    });
},

getInitialState: function() {
   return {
      posts: [],
      items: [],
      user:  []
   }
},

componentDidMount: function() {
    this.loadPostsFromServer();
    this.loadUserFromServer();

    //this.setState({items: this.state.posts}); 
    //setInterval(this.loadPostsFromServer, this.props.pollInterval);
},

render: function() {
    <div className="Posts">
        <List user={this.state.user} posts={this.state.items} />
    </div>
}

Где List может быть что-то вроде этого и не может сделать this.props.user print

var List = React.createClass({ //has to be called list
    render: function() {
        return (
            <p>{this.props.user}</p>
            <ul>
            {
                this.props.posts.map(post){
                    return (<p>{post.title}</p>)
                })
            }
            </ul>
        )
    }
});

но может сделать это:

var List = React.createClass({
    render: function() {
        return (<p>{this.props.user}</p>)
    }
});

В основном я передаю два реквизита в своей реальной функции, а вызов ajax доставляет пользователю массива, информацию о пользователе и сообщение в массиве с информацией о сообщении. Я могу отображать информацию о сообщении хорошо, и информация пользователя также заполнена, однако я не могу фактически отображать информацию о пользователе, полученную от вызова ajax get. Я распечатал состояние массива, и он был заполнен и заполнен. Однако переданные им сообщения возвращают такие сообщения, как не могут читать {this.props.user.firstName} и т.д., Однако, записывая его вторым способом и не включая сообщения, он отлично работает. Как использовать оба реквизита в функции карты?

  • 0
    У вас есть опечатка: </o> вместо </p>
  • 0
    исправил тип, но не проблема: / спасибо
Показать ещё 1 комментарий
Теги:
react-jsx

1 ответ

2
Лучший ответ

Будьте осторожны, в функции рендеринга вам всегда нужен тег wrap, чтобы заставить React работать. Вы должны добавить <div> в render компонента List.

var List = React.createClass({ //has to be called list
render: function() {
    return (
       <div> <-- ALWAYS HAS A WRAP TAG
        <p>{this.props.user}</p>
        <ul>
        {
            this.props.posts.map(post){
                return (<p>{post.title}</p>)
            })
        }
        </ul>

       </div>
    )
}
});

Этот код ниже работает, потому что есть <p> для обертывания содержимого.

var List = React.createClass({
render: function() {
    return (<p> <-- WRAP TAG
          {this.props.user}
          </p>)
}
});
Поделиться
  • 0
    ааа, я чувствую себя настолько глупо, я обычно делаю это для своих родителей, но я не заметил, что я перестал делать это для ВСЕХ моих дочерних компонентов! Спасибо.
  • 0
    У меня небольшой вопрос, но в отображении, можно ли вызвать this.props.user, потому что кажется, что он не работает, поскольку он фиксирует функцию с this.props.post. После тестирования это казалось так. Есть ли способ использовать this.props.user в моем отображении?
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню