Question

有没有人可以帮我解决以下问题？所有代码都工作正常，但没有呈现新闻列表。收到错误： my_news未定义。代码如下：在App组件中，未定义my_news。

// INDEX.JS

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

    var my_news = [
{
    'author': 'IT News',
    'text': 'THE WEEK IN APPLE NEWS: IPHONE 8 RUMORS, MARCH IPAD EVENTS RUMORS, APPLE PARK OPENING IN APRIL, AND MORE',
    'bigText': 'There are rumors of an iPad event next month, and we’re seeing more speculation about the next iPhone as the year progresses. But besides anything i-related, there are plenty of Apple-related headlines in this week’s roundup. Check them out in this slideshow. Just click on the link to get more information.'
}];

ReactDOM.render(
  <App my_news = {my_news} />,
  document.getElementById('root')
);

// APP.JS

    var Add = React.createClass({  
  getInitialState: function() {
    return {
      agreeNotChecked: true,
      authorIsEmpty: true,
      textIsEmpty: true
    };
  },
  componentDidMount: function() {
    ReactDOM.findDOMNode(this.refs.author).focus();
  },

  onBtnClickHandler: function(e) {
    e.preventDefault();
    var textEl = ReactDOM.findDOMNode(this.refs.text);
    var author = ReactDOM.findDOMNode(this.refs.author).value;
    var text = textEl.value;

    var item = [{
      author: author,
      text: text,
      bigText: '...'
    }];

    window.ee.emit('News.add', item);
    textEl.value = '';
    this.setState({textIsEmpty: true});
  },

  onCheckRuleClick: function(e) {
   this.setState({agreeNotChecked: !this.state.agreeNotChecked});
 },

 onAuthorChange : function(e){
  if(e.target.value.trim().length > 0){
    this.setState({authorIsEmpty:false})
  }else{
    this.setState({authorIsEmpty:true})
  }
},

onTextChange : function(e){
  if(e.target.value.trim().length>0){
    this.setState({textIsEmpty:false})
  }else{
    this.setState({textIsEmpty:true})
  }
},

render: function(){
  var agreeNotChecked = this.state.agreeNotChecked,
  authorIsEmpty = this.state.authorIsEmpty,
  textIsEmpty = this.state.textIsEmpty;

  return( 
  <form className = 'add cf'>
  <input
  type='text'
  className='add__author'
  onChange={this.onAuthorChange}
  defaultValue=''
  placeholder='Your Name'
  ref='author'
  />
  <textarea 
  className='add__text' 
  onChange={this.onTextChange}
  defaultValue='' 
  placeholder='Add News text' 
  ref='text'>
  </textarea>
  <label className='add__checkrule'>
  <input type='checkbox' defaultChecked={false} ref='checkrule' onChange={this.onCheckRuleClick} />I agree 
  </label>
  <button 
  className='add__btn' 
  onClick={this.onBtnClickHandler} 
  disabled={agreeNotChecked || authorIsEmpty || textIsEmpty}
  ref='alert_button' >
  Add News
  </button> 
  </form>
  );
}
});

var App = React.createClass({
  getInitialState: function(){
    return{
      news: my_news {/*not defined*/}
    };
  },

componentDidMount: function(){
    var self = this;
    window.ee.addListener('News.add', function(item){
      var nextNews = item.concat(self.state.news);
      self.setState({news: nextNews});
    });
  },

  componentWillUnmount: function() {
    window.ee.removeListener('News.add');
  },

  render: function() {
    return (
    <div className="app">
  <Add /> 
  <h3>News</h3>                         
<News data = {this.state.news} /> 
</div>

);
}
});

export default App;

Answer 1

问题是，在这一行：

getInitialState: function(){
    return{
      news: my_news //here
    };
},

您正在my_news中传递props，因此要访问my_news值，您需要撰写this.props.my_news，请使用此项：

getInitialState: function(){
    return{
       news: this.props.my_news
    };
},

反应：参考错误

1 个答案: