Hi Polina,
I won’t be able to provide an demo, neither give access to the application because I haven’t published it in the cloud yet.
However, I can show you my code, which is basically like the example provided in the website.
The difference is how I am delivering data to the component. I attached here the two JSX files I have been working on. I hope you don’t find my code a mess
, I am a beginner, so I’m sorry if I making my problem difficult to understand.
In the file “gantt-app.jsx” I have this function named “atualizar()” that will use Axios to get tasks from my Controller and set the result to a state variable called “this.state.acoes”.
atualizar(){
this.setState({
'isLoading': true
})
if (!this.props.id) {
axios.post(`/Acao/ObterAcoesPorItem`, {
itemId : this.props.itemId,
parameters: this.props.parameters
}).then((response) => {
this.setState({
loaded: true,
isLoading: false,
acoes:response.data
})
})
}
}[/code]
In the "render()" method I map that state variable in a new variable with the format that Gantt component requires.
[code] let acoes = this.state.acoes && this.state.acoes.map((acao) => (
{
id: acao.id,
text: acao.descricao,
codigo:acao.codigo,
start_date: acao.dataInicioPrevista,
farol_acao:acao.farolAcao,
duration: this.handleDuration(acao.dataInicioPrevista,acao.dataFimPrevista),
progress: this.handleProgress(acao.percentualRealizado),
percentual_previsto:this.handlePercentualPrevisto(
this.handleDuration(acao.dataInicioPrevista,acao.dataFimPrevista),
acao.dataInicioPrevista
),
holder:acao.responsavel.nome,
status_acao:acao.status.descricao,
baseline_inicial:this.handleValorNulo(acao.baselineInicial),
baseline_final:this.handleValorNulo(acao.baselineFinal),
data_inicio_realizada:this.handleValorNulo(acao.dataInicioRealizada),
data_fim_realizada:this.handleValorNulo(acao.dataFimRealizada),
observacao:this.handleValorNulo(acao.observacao),
como:this.handleValorNulo(acao.como),
onde:this.handleValorNulo(acao.onde),
porque:this.handleValorNulo(acao.porque)
}
))
let data = {
data:[].concat(acoes)
}[/code]
Then, I return a div with the component
[code]return(
<div>
<Panel style={{marginTop: 15, height: 700}}>
<Content {...this.props}>
<Row>
<div className="gantt-container">
{
acoes &&
<Gantt
tasks={data}
zoom={this.state.currentZoom}
onTaskUpdated={this.handleTaskUpdate}
onLinkUpdated={this.logLinkUpdate}
/>
}
</div>
</Row>
<MessageArea
messages={this.state.messages}
/>
</Content>
</Panel>
</div>
)[/code]
This is working fine. However, I use a modal to create a new Task. I am not using the lightbox the component provides. Right after creating a new task I call this method "handleClose" that will update my state variable "this.state.acoes" again:
[code] handleCloseAcao(){
this.atualizar()
}
Now… Here is where the problem happens. Right after calling that method, my state variable got updated, but the component is not rendering the new data it is receiving.
I attached here a print screen showing that the gantt component is receiving props and the method “shouldcomponentUpdate” is returnig true.
gant.zip (3.77 KB)