Question

我有一个数字数组，当一个项目添加到这个数组时，数字应该被这个项目替换。

我遇到的问题是大部分时间它都会取代数字，但有时它会在数字旁边添加项目。

删除项目时我也遇到同样的问题，因为该项目旁边有时会显示该号码。

此外，它目前允许多次添加项目，以便如果项目被添加两次，它将显示该项目的一个实例，并且必须单击删除按钮两次以实际删除该项目。

如何在添加/删除项目时阻止项目旁边出现的数字行为，还可以防止多次添加项目？

Hello.js

import React from 'react';
import update from 'immutability-helper'
import styled from 'styled-components'
import Product from './Product'

const NumberWrap = styled.div`
  display: flex;
  flex-wrap:wrap
  border: 1px solid #ccc;
  flex-direction: row;
`

const Numbers = styled.div`
  display:flex;
  background: #fafafa;
  color: #808080;
  font-size: 32px;
  flex: 0 0 20%;
  min-height: 200px;
  justify-content: center;
  align-items:center;
  border-right: 1px solid #ccc;
`

const CardWrap = styled.div`
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-top: 20px;
`

export default class Hello extends React.Component {
  constructor() {
    super()
    this.state = {
      placeholder: [1, 2, 3, 4, 5],
      addedArray: [],
      data: [
        { id: 1, header: 'Item 1' },
        { id: 2, header: 'Item 2' },
        { id: 3, header: 'Item 3' },
        { id: 4, header: 'Item 4' }
      ],
      addedItems: [],
    }
  }

  handleAdd = (id) => {
    const nextAdded = [id, ...this.state.addedArray];
    this.setState({
      addedArray: nextAdded,
      addedItems: update(this.state.addedItems, {
        $push: [
          id,
        ],
      })
    })
  }

  handleRemove = (id) => {
    const index = this.state.addedItems.indexOf(id);
    const nextAdded = this.state.addedArray.filter(n => n != id);
    this.setState({
      addedArray: nextAdded,
      addedItems: update(this.state.addedItems, {
        $splice: [
          [index, 1]
        ],
      })
    })
  }

  render() {
    return (
      <div>
        <NumberWrap>
          {
            this.state.placeholder.map(num =>
              <Numbers>
                {this.state.addedArray.filter(n => n == num).length == 0 && num}
                {
                  this.state.data.filter(item => {
                    return this.state.addedItems.indexOf(item.id) === num - 1;
                  }).slice(0, 5).map(item =>
                    <Product {...item} remove={() => { this.handleRemove(item.id) }} />
                    )
                }
              </Numbers>
            )
          }
        </NumberWrap>


        <CardWrap>
          {
            this.state.data.map(item =>
              <Product
                {...item}
                add={() => {
                  this.handleAdd(item.id)
                }}
              />
            )}
        </CardWrap>
      </div>
    )
  }
}

Product.js

import React from "react";
import styled from "styled-components";

const Card = styled.div`
  flex: 0 0 20%;
  border: 1px solid #ccc;
`;

const Header = styled.div`
  padding: 20px;
`;

const AddBtn = styled.button`
  width:100%;
  height: 45px;
`;

const Product = props => {
  const { add, id, header, remove } = props;
  return (
    <Card>
      <Header key={id}>
        {header}
      </Header>
      <AddBtn onClick={add}>Add</AddBtn>
      <AddBtn onClick={remove}>Remove</AddBtn>
    </Card>
  );
};

export default Product;

Answer 1

在这种情况下，直接使用您的项目并将其存储在对象中似乎更容易。

查看my fork了解工作示例。

将addedItems更改为对象
更改了添加处理程序以直接使用项目对象

export default class Hello extends React.Component {
  constructor() {
    super()
    this.state = {
      placeholder: [1, 2, 3, 4, 5],
      data: [
        { id: 1, header: 'Item 1' },
        { id: 2, header: 'Item 2' },
        { id: 3, header: 'Item 3' },
        { id: 4, header: 'Item 4' }
      ],
      addedItems: {},
    }
  }

  handleAdd = (item) => {
    this.setState({
      addedItems: update(this.state.addedItems, {
        [item.id]: {$set: item}
      })
    })
  }

  handleRemove = (item) => {
    this.setState({
      addedItems: update(this.state.addedItems, {
        $unset: [item.id]
      })
    })
  }

  render() {
    return (
      <div>
        <NumberWrap>
          {this.state.placeholder.map(num => {
            const item = this.state.addedItems[num];
            return (
              <Numbers>
                {item &&
                  <Product
                    key={num}
                    {...item}
                    remove={() => {
                      this.handleRemove(item);
                    }}
                  />
                }
              </Numbers>
            );
          })}
        </NumberWrap>
        <CardWrap>
          {this.state.data.map(item =>
            <Product
              {...item}
              add={() => {
                this.handleAdd(item)
              }}
            />
          )}
        </CardWrap>
      </div>
    )
  }
}

Answer 2

以下是演示的链接：

请检查：

https://codesandbox.io/s/8kl2pkw5m0

我已删除了addedItems，并使用了addedArray

以下是停止添加多个

的一种方法

const nextAdded = [...new Set([id, ...this.state.addedArray])];

创建一个数组，然后以这种方式创建它的数组，将删除所有重复的条目。

将另一个项添加到数组时从数组中删除项

2 个答案: