を更新することができます。が反応 - SETSTATE(...)は、私だけが反応するように新たなんだと私は次のエラーメッセージにつまずいたのは初めてのために取り付けられたまたは取り付け部品
警告:SETSTATE(。 ..)取り付けられた、または取り付けられている コンポーネントのみを更新できます。これは通常、アンマウントされた コンポーネントに対してsetState()を呼び出したことを意味します。これはノーオペレーションです。コメント のコードを確認してください。
私はメッセージが何を伝えているのか理解しようとしていますが、私のコードを再シャッフルするたびに、コンポーネントがレンダリングしても同じエラーメッセージがコンソールで約50回/すべきだ。
App.js
import React, { Component } from 'react';
import $ from 'jquery';
import Commentspar from './Components/commentspar';
class App extends Component {
constructor(props) {
super(props);
this.state = {
commentsLoading:"loading",
commentsPre:[],
upToId:0,
comments:[]
}
}
commentsXMLrequest =() => {
this.setState({
commentsLoading:"loading"
})
//the below ajax call goes and retrieves the data to fill my components through state
$.ajax({
type: "GET",
dataType: "json",
crossDomain:true,
url:"http://someendpoint.com/endpoint.php",
success: function(data){
var parsedComments = JSON.parse(data);
var newComments = [/* just above here I construct an array of new objects that look something like {id:0,text:"blah blah",type:"sad"} */];
// here I populate the commentsPre array with the new array of objects
this.setState({
commentsPre:newComments,
commentsLoading:""
})
// here I call the next function (this is the one I would like to repeat)
this.commentsShow()
}.bind(this)
})
}
commentsShow =() => {
var newId = this.state.upToId;
// the newArray variable below is set to select which comment to show in the commentsPre array and increments every time the commentsShow function runs
var newArray = [this.state.commentsPre[newId]];
this.setState({
comments:newArray,
upToId:this.state.upToId + 1 //incrementation here
})
setTimeout(function(){
// here is where i'm trying to repeat this function every second after incrementing the upToId state but it gives me the error
this.commentsShow()
}.bind(this),1000)
}
componentDidMount() {
//initially kick of the load data function when page is loaded
this.commentsXMLrequest()
}
render() {
return (
<div className="App">
<div className="app-content-wrap">
<div className="app-content-wrap-inner">
<Commentspar commentsPre={this.state.commentsPre} commentsShow={this.commentsShow} commentsLoading={this.state.commentsLoading} comments={this.state.comments} />
</div>
</div>
</div>
);
}
}
インポート」から、{コンポーネント}を反応させcommentspar.js
import React, {Component} from 'react';
import Comment from'./comment';
class Commentspar extends Component {
render() {
return (
<div className="comments-par">
<div className={"comments-inner " + this.props.commentsLoading}>
{
this.props.comments.map((comment) => {
return (
<Comment commentsShow={this.props.commentsShow} commentObj={comment} key={comment.id} />
)
})
}
</div>
</div>
)
}
}
export default Commentspar;
Comment.js
:ここで構成要素であります反応する '。 'jquery'からのインポート$;
クラスコメントは、私はそれは私がしようとすると、私にこのエラーメッセージを与え、this.commentsShow()
二時間を、どのように私は私の構造を-手配再することができますように私の構造と間違っているコンポーネント{
constructor(props) {
super(props);
this.state = {
text:"",
state:""
};
}
componentWillMount() {
this.setState({
text:this.props.commentObj.text
})
}
render() {
return (
<div className={"comment-outer " + this.props.commentObj.type} data-type={this.props.commentObj.type}>
<div className={"comment-inner " + this.state.loaded}>
<div className={"comment-type " + this.props.commentObj.type}></div>
<div className="comment-text">
<p className="placeholderText">{this.state.text}</p>
</div>
</div>
</div>
)
}
}
export default Comment;
を拡張しますこれを修正しますか?
ありがとうございます!
.. –
をので、 Ajaxコールの成功時のコールバックが呼び出される前にコンポーネントがアンマウントされている可能性があります。そのような場合は、コンポーネントがアンマウントされようとしているときにAJAX呼び出しを中止する必要があります。更新された回答を確認してください。 –