ReactJS 更新简单数组 onChange of inputs

Question

我有以下属性社交图标：

items: {
    type: 'array',
    default: [
      { icon: 'twitter', url: '#' },
      { icon: 'facebook-square', url: '#' },
      { icon: 'youtube', url: '#' },
    ],
 },

我有一些控件：

<InspectorControls>
    <PanelBody title={ __( 'Social Network Settings' ) } initialOpen={ true }>

    {items.map( ( item, index ) => (

        <Fragment>

          <SelectControl
            label="Social Network"
            value={ item.icon }
            options={ [
                { label: __( 'Twitter' ), value: 'twitter' },
                { label: __( 'Facebook' ), value: 'facebook-square' },
                { label: __( 'Instagram' ), value: 'instagram' },
                { label: __( 'YouTube' ), value: 'youtube' },
            ] }
            onChange={ ( value ) => setAttributes( { items: [ ...items, { icon: value } ] } ) }
          />

          <TextControl
            label={ __( 'Social Link' ) }
            value={ item.url }
            onChange={ ( value ) => setAttributes( { items: [ ...items, { url: value } ] } ) }
           />

        </Fragment>

    ) ) }

    </PanelBody>
</InspectorControls>

我正在渲染社交图标：

{items.map( ( item, index ) => (
  <a key={ index }
     href={ item.url || '#' }
     target="_blank"
  >
    <FontAwesomeIcon icon={['fab', item.icon]} />
  </a>
) ) }

显示了 3 个图标。每个 select 控件中显示正确的图标名称。但是，当我更改 select 控件中的图标时，会添加一个新图标，而不是更新。添加 URL 时也是如此，正在添加空白标签。

如何在更改 select 和文本输入时更新数组？

Answer 1

上面的 onChange 逻辑意味着每次更新都会添加一个新项目。

您的 onChange 应该找到正确的元素并相应地更新它。例如，onChange for Social Network 看起来类似于下面的内容。您也应该为另一个 onChange 实现类似的逻辑。

onChange={( value ) => {
  const newItem = {...item, icon: value };
  const newItems = [...items];
  newItems[index] = newItem;
  setAttributes({ items: newItems });
}}

ReactJS 更新简单数组 onChange of inputs

ReactJS update simple array onChange of inputs

javascript

reactjs

wordpress-gutenberg