mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Repro of for loop with context variable iterator variable
`let` bindings of context variables are lowered to a DeclareContext + StoreContext, which breaks codegen for `for` loops which expect that all statements of the init block will lower to variable declarations. The two instructions produce a variable declaration and a reassignment.
This commit is contained in:
+35
@@ -0,0 +1,35 @@
|
||||
|
||||
## Input
|
||||
|
||||
```javascript
|
||||
function Component() {
|
||||
const data = useData();
|
||||
const items = [];
|
||||
// NOTE: `i` is a context variable because it's reassigned and also referenced
|
||||
// within a closure, the `onClick` handler of each item
|
||||
for (let i = MIN; i <= MAX; i += INCREMENT) {
|
||||
items.push(<Stringify key={i} onClick={() => data.set(i)} />);
|
||||
}
|
||||
return items;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
## Error
|
||||
|
||||
```
|
||||
4 | // NOTE: `i` is a context variable because it's reassigned and also referenced
|
||||
5 | // within a closure, the `onClick` handler of each item
|
||||
> 6 | for (let i = MIN; i <= MAX; i += INCREMENT) {
|
||||
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
> 7 | items.push(<Stringify key={i} onClick={() => data.set(i)} />);
|
||||
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
|
||||
> 8 | }
|
||||
| ^^^^ [ReactForget] Invariant: Expected a variable declaration (6:8)
|
||||
9 | return items;
|
||||
10 | }
|
||||
11 |
|
||||
```
|
||||
|
||||
|
||||
+10
@@ -0,0 +1,10 @@
|
||||
function Component() {
|
||||
const data = useData();
|
||||
const items = [];
|
||||
// NOTE: `i` is a context variable because it's reassigned and also referenced
|
||||
// within a closure, the `onClick` handler of each item
|
||||
for (let i = MIN; i <= MAX; i += INCREMENT) {
|
||||
items.push(<Stringify key={i} onClick={() => data.set(i)} />);
|
||||
}
|
||||
return items;
|
||||
}
|
||||
Reference in New Issue
Block a user