javascript - 在 React 中映射数组

Question

我在我所在州的 item 属性中的对象数组中映射每个对象。问题是，我希望能够为每个退回的商品附加一个按钮，该按钮仅适用于该商品，而不适用于其他商品。这是我到目前为止所拥有的:

class App extends React.Component {
    state = {
        item: [],
    }
    componentDidMount() {
        this.setState({
            item: [
                {
                    name: 'jacob',
                    hair: 'brown',
                    sex: 'male',
                }, {
                    name: 'hannah',
                    hair: 'brown',
                    sex: 'female',
                }
            ]
        })
    }
    handleChange = (e) => {
        console.log(e.target.value)
        var x = Object.assign({}, this.state)
    }
    render() {
        return(
            <div>
                { this.state.item.length > 0 ? 
                    (
                        <div className="row mt-5">
                            <Item item={ this.state.item } handleChange={ this.handleChange } />
                        </div>
                    ) : null
                }
            </div>
        )
    }
}

class Item extends React.Component {
    render() {
        return(
            <div className="col">
                { this.props.item.map(s => (
                    <div>
                        <div className="mt-5">{ s.name }</div>
                        <button onClick={ this.props.handleChange } value={ s.name }>Click</button>
                    </div>
                 ))}
            </div>
        )
    }
}

因此，例如，如果按钮的 fx 是更改它所呈现的项目的名称属性，我希望它仅更改该项目，而其他项目不应受到影响。每当我遍历它时，它都会将按钮的效果附加到每个项目，所以如果我为一个项目单击它，我实际上是为所有项目单击它，而这正是我不想要的。

对于那些好奇的人，我在 componentDidMount 中设置状态来模拟调用 API。

此外，当前在 handleChange 中运行的 fx 只是一些乱七八糟的东西，我试图找出值和处理数组内嵌套对象的解决方案。

Answer 1

在 CodeSandBox 上尝试此重构代码, 在 React 中迭代组件时必须添加键，我已经添加了它，Item 组件也可以是 function Component，因为它不处理状态。

更新:下面是代码，以防它在 codesandbox 上不可用。

import React from 'react';
import { render } from 'react-dom';

class App extends React.Component {
  state = {
    items: [],
  }

  componentDidMount() {
    this.setState({
      items: [
        {
          name: 'jacob',
          hair: 'brown',
          sex: 'male',
        }, {
          name: 'hannah',
          hair: 'brown',
          sex: 'female',
        }
      ]
    })
  }

  handleChange = (e) => {
    console.log(e.target.value)
  }

  render() {
    const { items } = this.state;
    return (
      <div>
        {items.length && (
          items.map((item, index) => (
            <div className="row mt-5" key={index}>
              <Item item={item} handleChange={this.handleChange} />
            </div>
          ))
        )
      }
      </div>
    )
  }
}

const Item = ({ item, handleChange }) => (
  <div className="col">
    <div className="mt-5">{item.name}</div>
    <button onClick={handleChange} value={item.name}>Click</button>
  </div>
);

render(<App />, document.getElementById('root'));