Child components fail when using Render.withData
- Dominant language
- JavaScript
- Stars
- 3.4k
- Forks
- 312
- PR merge metrics
- No merged PRs in 30d
Description
Failing test case:
``` js
import Alt from 'alt'
import * as Render from 'alt/utils/Render'
const alt = new Alt()
import React, { Component } from 'react'
const actions = alt.generateActions('success', 'fail')
const Source = {
things: {
remote(_, x) {
return Promise.resolve(x)
},
success: actions.success,
error: actions.fail
}
}
const store = alt.createStore(class {
constructor() {
this.registerAsync(Source)
this.bindActions(actions)
this.caca = null
}
success(x) {
console.log('ok')
this.caca = x
}
fail() {
console.log('shit')
}
}, 'store')
const App = Render.withData(() => {
return store.things(1)
}, class extends Component {
static displayName = 'App'
constructor() {
super()
console.log(1)
}
render() {
console.log('RENDERING')
return (
)
}
})
const Child = Render.withData(() => {
console.log('WHY AM I NOT HERE?')
return store.things(2)
}, class extends Component {
static displayName = 'Child'
constructor() {
super()
console.log(2)
}
render() {
return
}
})
Render.toString(App, {}).then((markup) => {
console.log('@', markup)
}).catch((err) => {
console.log('uhoh', err)
})
```
Contributor guide
Research direction
Start with the supplied reproduction and trace Render.withData through Render.toString, focusing on why the Child callback is not reached during rendering. Done means the Child data callback runs and the resulting child output is included in the rendered markup without breaking the existing App behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100