preface

The current project team uses version Taro V2.2.16

There is a problem with the value of data destructuring for multi-layer nested loops

Chestnut:

import Taro from '@tarojs/taro'; import { View } from '@tarojs/components'; Class A extends Taro.Com {data = [{title: 'project 1', type: 1, children: [{title:' project 1'}, {title: 'project 1'}, {title:' project 1'}, 'project 1-2'}],}, {title: '2' project, type: 2, children: [{title: 'project 2-1}, {title:' project 2-2}],},]; render() { return ( <View> {this.data.map((outItem) => { const { title, type, children } = outItem; return ( <View> <View>{title}</View> <View> {children.map((innerItem) => { console.log(type); // Where is the problem? Return (<View>{type === 1 && <View>{inneritem. title} - type 1 </View>} {type === 2 && ( <View>{inneritem. title} - this is a type 2 </View>)} </View>); })} </View> </View> ); })} </View> ); } } export default A;Copy the code

Phenomenon:

The console.log above should normally print the value of type, but Taro is compiled to print undefined. Obviously, all of the following conditions will be false, thus making an error.

  • The reason:

Looking at the compiled code, it is found that Taro compiles the code in the map, and the compiled result is roughly as follows

var loopArray128 = data.map(function (outItem) { var outItem = { $original: (0, _index.internal_get_original)(outItem) } var _outItem$$original = outItem.$original, title = _outItem$$original.title, type = _outItem$$original.type, children = _outItem$$original.children; var $anonymousCallee__36 = children.map(function (innerItem) { innerItem = { $original: (0, _index.internal_get_original)(innerItem) }; console.log(outItem.type); Outitem. type will not take the desired value //... other code }); }Copy the code

Solution:

Do not use deconstruction. Here is part of the code

render() { return ( <View> {this.data.map((outItem) => { const { title, children } = outItem; return ( <View> <View>{title}</View> <View> {children.map((innerItem) => { console.log(outItem.type); $original. Type return (<View>{type === 1 && <View>{inneritem. title} - type 1 </View>} {type === 2 && (< View > {innerItem. Title} - this is a type ii < / View >)} < / View >); })} </View> </View> ); })} </View> ); }Copy the code

Props and state use the same variable name

Chestnut:

class Demo {
  state = {
    operationKeys: []
  }
  
  render() {
    const { operationKeys } = this.props
    console.log('operationKeys', operationKeys, operationKeys.length > 0)
    return (
      <View>
        {operationKeys.length > 0 ? (
          <View>has data</View>
        ) : (
          <NoData/>
        )}
      </View>
    )
  }
}

Copy the code

Phenomenon:

Components in the props. OperationKeys. Length > 0 is true, always rendering

The reason:

Taro when compiling the TSX (or JSX), the JS logic is separated from the template. The JS part of the logic generates a data based on the JSX branch, which is used to render the template. The tag portion of JSX is compiled to WXML. If the props and state names are the same, and the state is not updated, rendering will always use the variable under state, causing a rendering error.

The nesting of ternary expressions in JSX can also be problematic (magic Taro)

Chestnut:

{isSomething ? <View className="row"> <View className="row-title"> </View> <View className="row-content"> {Boolean(tampArrayList)? TampArrayList. The map ((item, I) = > (< View key = ${I} {item. Id + ` `} > {` ${item. The name} * ${item. Num}. ${item.content}`} </View> )) : '-'} </View> </View> ) : null}Copy the code

Phenomenon:

Taro compiled the code in a different way, resulting in unexpected errors

Var anonymousState__temp5 = Boolean(tampArrayList); // Error var loopArray197 = isWeddingPhoto? tampArrayList.map(function (item, i) { item = { $original: (0, _index.internal_get_original)(item) }; // $loopState__temp3 is the key used by WXML. Var $loopState__temp3 = Boolean(anyArrayList)? item.$original.id + ("" + i) : null; return { $loopState__temp3: $loopState__temp3, $original: item.$original }; }) : [];Copy the code

The reason:

Taro too spicy chicken

Solution:

Assign the inner ternary expression to a variable

render() { const productList = Boolean(tampArrayList) ? TampArrayList. The map ((item, I) = > (< View key = ${I} {item. Id + ` `} > {` ${item. The name} * ${item. Num}. ${item.content}`} </View> )) : '-'; / /... return ( <View className="row-content">{productList}</View> ) }Copy the code

Others have not yet been found but have been successfully solved by the experience of stepping pit

Scrollview layout using Flex may not work (magic little program)

Error passing in component as node rendering in custom component

Chestnut:

import Taro from '@tarojs/taro'; import { View, Input } from '@tarojs/components'; // Cell is a custom component, title is the title, renderContent is passed to the DOM to render the content import {Cell} from '@components/index'; Class A extends Taro.Com {data = [{title: '1', content:' 111',}, {title: '2 ', content:' 111', 'Input 222',},]; render() { return ( <View> {this.data.map((item) => { const { title, content } = item; Return (<Cell title={title} renderContent={<Input placeholder=" value={content} />} />); })} </View> ); }}Copy the code

Phenomenon:

The Input value is not displayed as expected. But content does have a value.

why

To be determined

Solution:

Just wrap a View around the top layer to solve this problem.

<Cell title={title} renderContent={<View> <Input View =" value={content} /> </View>} />Copy the code

A custom component compilation error is reported after a method in the store is deconstructed

import Taro from '@tarojs/taro'; import { View, Input } from '@tarojs/components'; Import {Cell} from '@components/index'; import {Cell} from '@components/index'; // Store is a class for storing data (mobx) import Store from './ Store '; class A extends Taro.Component { store = new Store(); render() { const { name, handleClick } = this.store; return ( <View> <View onClick={handleClick}>{name}</View> <Cell onClick={handleClick} /> </View> ); } } export default A;Copy the code

The phenomenon of

The custom component Cell has a compilation problem after passing in the custom method. But the View seems to be fine.

why

To be determined

To solve

Pass the method directly, or wrap it with an anonymous function. Here is part of the code:

<Cell onClick={() => handleClick()} />
// or
<Cell onClick={this.store.handleClick} />

Copy the code

conclusion

  • Some of the above problems have been solved in Taro3 but Taro is still a bit of a problem. When I’m not working on the iterative task, I will put another

    layer on the JSX element that is in trouble, which is lazy. But it really works

  • Second: Go back to Taro’s best practices when you have a problem

Finally, if you find this article helpful, please click "Like" three times. Thank you very much