Memoize 和 lodash 时间获取索引，创建唯一的文本输入

Question

我有一个带加号的图标按钮。每次单击它时，我都会创建一个文本输入。我简化了示例中的代码，但在我的项目中，我试图用它来创建社交图标，在每个文本输入中添加社交图标 name/or url。代码是 React 中的 JSX：

export default class Test extends Component {
    render() {  

        const { attributes: { totalItems, textInputValue }, setAttributes } = this.props;

        const createItem = memoize( ( totalItems ) => {
            return times( totalItems, () => renderItems( totalItems, textInputValue ) );
        } );

         return (
            <IconButton                 
              label={ __( 'Add text input' ) }
              icon="plus"
              onClick={ () => setAttributes( { totalItems: totalItems + 1 } ) }
            />

            { createItem( totalItems ) }
        )
    }
}

function renderItems( index, textInputValue  ) {
    return (

     <TextControl
        label={ __( 'My text input' ) }
        value={ textInputValue }
        onChange={ ( value ) => setAttributes( { textInputValue: value } ) }
     />  /* how can I get unique text inputs? */

     { index } /* this doesn't return the index of the element created */
    )
}

问题：正在创建相同的文本输入。有没有办法将索引或映射添加到 memoize/times 以呈现唯一输入？

Answer 1

Lodash 的 _.times() returns index 回调：

const totalItems = 5;

const result = _.times(totalItems, index => ({ index }));

console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

所以在你的情况下，组件应该是这样的：

注意：我已经删除了记忆，因为在渲染中多次调用它实际上并没有记忆任何东西。如果你需要 memoize，你应该将函数创建移动到对象的属性，这样调用就会被缓存。

export default class Test extends Component {
    render() {  
        const { attributes: { totalItems, textInputValue }, setAttributes } = this.props;

        const createItem = (totalItems, textInputValue) =>
          times(totalItems, index => renderItems(index, textInputValue );

         return (
            <IconButton                 
              label={ __( 'Add text input' ) }
              icon="plus"
              onClick={ () => setAttributes( { totalItems: totalItems + 1 } ) }
            />

            { createItem( totalItems ) }
        )
    }
}

Memoize 和 lodash 时间获取索引，创建唯一的文本输入

Memoize and lodash times get index, create unique text inputs

jsx

lodash

reactjs

memoise