2016-11-11 6 views
0

Невозможно понять, что происходит. Я нажимаю кнопку, это устанавливает состояние и настройку состояния, изменяет ключ, чтобы быть истинным, и если этот ключ является истинным, должен отображаться другой вывод. вот код:Почему не реагирует на изменение состояния?

нажмите Функция кнопки вызова:

<input type="submit" value="I can play" onClick={() => this.canPlay()}/> 

работает эта функция:

canPlay: function() { 
    let name = this.props.value; 
    console.log(name, 'name'); 
    let email = '[email protected]'; 
    this.submitUserResponseCanPlay(this.today(), name, email) 
    this.setState({thanks: true}) //SET STATE HERE 
    }, 

(спасибо устанавливается в ложь в getInitialState)

затем в функции визуализации :

render: function(){ 
    let output; 
    if (this.state.thanks){ 
     output = <Thanks />; 
    } 

Если состояние истинно, то визуализируйте новый вывод. `part - это класс, который имеет только возвращаемую часть внутри функции рендеринга, которая выглядит так:

var Thanks = React.createClass({ 

    render: function(){ 
    return (
     <div id="results" className="search-results"> 
     Thanks, your answer has been recorded! 
     </div> 
    ) 
    } 

}); 

Это не отображается. любая идея, почему ???

незнакомец вещь такая, как это в другой части моего файла, и эта часть работает. то есть я нажимаю кнопку отправки ранее, и это изменяет пару ключ/значение от false до истины и отображает новый макет страницы. просто не работает здесь. возможно, ив пропустил что-то маленькое ..

+0

I санк Вы забыли вернуть() внутри рендеринга() метод – Borjante

+2

вы можете разместить весь компонент, а не разделив ее на части? возможно, вы не связали canPlay – Conan

+0

, компонент довольно большой. но что еще вы хотите увидеть? есть два компонента –

ответ

0
render: function(){ 
let output; 
if (this.state.thanks){ 
    output = <Thanks />; 
} 

Это должно быть

render: function(){ 
if (this.state.thanks){ 
    return <Thanks /> 
} 

Вы всегда должны вернуть что-то внутри render

+0

У меня есть что-то внутри рендеринга, я просто пропустил это, чтобы не показывать множество кода. –

+1

Я имел в виду, что вам нужно слово 'return' –

+0

, у вас нет всего контекста функции рендеринга. может быть, что вывод используется как компонент позже или что-то в этом роде. нам нужно увидеть больше информации –

0

Я не думаю, что вы можете установить переменные, как JSX так, если им неправильно проигнорируйте это. НО в этом случае кажется, что вы, вероятно, пытаетесь сделать

{output} 

где-то в вашем коде. вместо того, чтобы заменить это

{this.state.thank ? <Thanks /> : null}