Memoize и Lodash Times получить индекс, создать уникальный текстовый ввод

Question

У меня есть кнопка со знаком плюс. Каждый раз, когда я нажимаю на него, я создаю текстовый ввод. Я упростил код в этом примере, но в своем проекте я пытаюсь использовать его для создания социальных значков, в которых при каждом вводе текста вы добавляете имя / URL-адрес значка социальной сети. Код JSX в React:

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 */
    )
}

Проблема: создается тот же текстовый ввод. Есть ли способ добавить индекс или карту для запоминания / времени, чтобы сделать уникальные входные данные?

Answer 1

Lodash-х _.times()возвращает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 ) }
        )
    }
}