jquery console.log正在打印数据两次[reactjs]

lpwwtiir  于 2023-06-22  发布在  jQuery
关注(0)|答案(4)|浏览(113)

console.log在打印空数组时打印两次值,在另一个值中打印从 AJAX 调用获得的值。
下面给出的值打印为'[]'和[“answered”]
我不知道它在哪里被初始化了,我在那里放了一个调试器,它只在那里停了一次,只是为了打印 AJAX 数据值。
{“status”:1,“value”:4、“data”:{“answer_text”:“已回答”} }

class Discuss extends React.Component {
  constructor() {
    super();
    this.state = {
      discussions: []
    };
  }
  componentWillMount() {
    this._getData();
  }
  _getAnswerText() {
    return this.state.discussions.map(discussion => discussion.answer_text);
  };

  render() {
    const comments = this._getComments();
    return ( <div> {comments} <ActionBar answer_text={this._getAnswerText()}/></div > );
  });
}

_getData() {
  $.ajax({
    method: 'GET',
    url: '/someurl'
    success: (discussions) => {
      var array = [];
      array.push(discussions);
      var dis = []
      dis.push(array[0].data)
      this.setState({
        discussions: dis
      });
    }
  });
}
}

class ActionBar extends React.Component {
    constructor(props) {
      super(props);
    };
    render() {
        console.log(this.props.answer_text)
        return ( <div> {this.props.answer_text} </div>)
	};

}

ReactDOM.render(<Discuss/>,document.getElementById('content'));
piwo6bdm

piwo6bdm1#

从index.js中删除StrictMode
<React.StrictMode>

<App />

</React.StrictMode>

kg7wmglp

kg7wmglp2#

React.StrictMode是2018年16.3.0版本中引入的 Package 器。起初,它只适用于类组件,在16.8.0之后,它也适用于钩子。
如发行说明中所述:StrictMode是一个 Package 器,帮助准备应用程序进行异步渲染
为什么要双重渲染?使用React.StrictMode的好处之一是,它可以帮助我们检测渲染阶段生命周期中的意外副作用。
你可以在这个链接上阅读更多关于它的信息:
https://mariosfakiolas.com/blog/my-react-components-render-twice-and-drive-me-crazy/

js5cn81o

js5cn81o3#

这很正常 AJAX 调用是异步的,所以你的组件会立即继续呈现,第一次呈现的状态是空数组,它作为一个prop传递给ActionBar。当 AJAX 调用返回时,它填充数组并更新状态,这会导致再次调用render(),从而重新呈现ActionBar沿着更新后的prop。

k4emjkb1

k4emjkb14#

如果您真的希望记录来自props的数据,请将该log保存在componentWillReceiveProps()中。因为它会为父Component中的每个新props触发

componentWillRecieveProps(nextProps){
    console.log(nextProps.answer_text); //you can log data from props here to check
}

只要propsstate中有变化,就会调用render()方法。也就是说,每当您的React.ComponentshouldComponentUpdate()返回true时。
所以很明显,如果数据(props or state)发生了变化,你会看到render()方法不止一次地执行。
here阅读更多关于React Component及其生命周期的信息。

**更新:**如果数据为空,只需在render()中返回null即可

class Discuss extends React.Component {
  constructor() {
    super();
    this.state = {
      discussions: []
    };
  }
  componentWillRecieveProps(nextProps){
    console.log(nextProps.answer_text); //you can log data from props here to check
  }
  componentWillMount() {
    this._getData();
  }
  _getAnswerText() {
    return this.state.discussions.map(discussion => discussion.answer_text);
  };

  render() {
    const comments = this._getComments();
    return ( <div> {comments} <ActionBar answer_text={this._getAnswerText()}/></div > );
  });
}

_getData() {
  $.ajax({
    method: 'GET',
    url: '/someurl'
    success: (discussions) => {
      var array = [];
      array.push(discussions);
      var dis = []
      dis.push(array[0].data)
      this.setState({
        discussions: dis
      });
    }
  });
}
}

class ActionBar extends React.Component {
    constructor(props) {
      super(props);
    };
    render() {
      const {answer_text} = this.props;
        return ( 
          <div>
                { answer_text && answer_text.length > 0 || null} 
          </div>
        )
	};

}
                

ReactDOM.render(<Discuss/>,document.getElementById('content'))

相关问题