javascript - react 替换数组中的项目

Question

我正在尝试用另一个项目替换数组中的单个项目，我有一个带有数字位置的占位符，当我单击添加时，第一个项目应该进入第一个位置，第二个项目进入第二个位置位置等。

目前它会在点击时在所有位置添加项目，这不是我想要的行为。

如果我删除数字位置占位符，我可以让它们以正确的位置进入数组，但我无法让它与占位符一起使用。

如何在点击替换数组中的数字位置时获取产品项？

https://codesandbox.io/s/6z48qx8vmz

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],
      data: [
        { id: 1, header: 'Item 1'},
        { id: 2, header: 'Item 2'},
        { id: 3, header: 'Item 3'},
        { id: 4, header: 'Item 4'}
      ],
      addedItems: [],
    }
    this.handleAdd.bind(this)
    this.handleRemove.bind(this)
  }

  handleAdd(id) {
    this.setState({
        addedItems: update(this.state.addedItems, {
        $push: [
          id,
        ],
      })
    })
  }

  handleRemove(index) {
    this.setState({
      addedItems: update(this.state.addedItems, {
        $splice: [
          [index, 1]
        ],
      })
    })
  }

  render() {
    return(
      <div>
        <NumberWrap>
          {
            this.state.placeholder.map(item =>
            <Numbers>{item}
            {
              this.state.data.filter(item =>
              this.state.addedItems.indexOf(item.id) !== -1).slice(0, 5).map(item =>
                <Product {...item} remove={this.handleRemove} />
              )
            } 
            </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

我很难理解这个问题，但这就是你想要的吗 https://codesandbox.io/s/vj7vxw198y ？如果需要，它仍然需要做一些工作才能允许多次添加相同的项目。