Javascript React中数组上的映射

我正在映射状态的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>
        )
    }
}

类应用程序扩展了React.Component{
状态={
项目：[]，
}
componentDidMount（）{
这是我的国家({
项目：[
{
名字：'雅各布'，
头发：“棕色”，
性别：'男'，
}, {
名字：“汉娜”，
头发：“棕色”，
性别：'女性'，
}
]
})
}
handleChange=（e）=>{
console.log（例如target.value）
var x=Object.assign（{}，this.state）
}
render（）{
返回(
{this.state.item.length>0？
(
)：null
}
)
}
}
类项扩展了React.Component{
render（）{
返回(
{this.props.item.map（s=>(
{s.name}
点击
))}
)
}
}

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

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

---

另外，当前在handleChange中运行的fx只是一些混乱，我试图找出值和一个处理数组中嵌套对象的解决方案。

我想您希望将单个元素传递到您的

handleChange

：

  { this.props.item.map((s, i) => {
      <div>
        <div className="mt-5">{ s.name }</div>
        <button key={i} onClick={ (s) => this.props.handleChange(s) } value={ s.name }>Click</button>
      </div>
   })}

{this.props.item.map（（s，i）=>{
{s.name}
this.props.handleChange（s）}value={s.name}>单击
})}

---

这样，您就可以将单个

项作为参数传入，因此当您编写
handleChange
时，您可以使用该项而不是整个数组执行任何操作
 在上尝试此重构代码，
在React中迭代组件时必须添加键，我已经添加了它，项组件可以是函数组件，因为它不处理状态

更新：以下是代码，以防它在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'));

从“React”导入React；
从'react dom'导入{render}；
类应用程序扩展了React.Component{
状态={
项目：[]，
}
componentDidMount（）{
这是我的国家({
项目：[
{
名字：'雅各布'，
头发：“棕色”，
性别：'男'，
}, {
名字：“汉娜”，
头发：“棕色”，
性别：'女性'，
}
]
})
}
handleChange=（e）=>{
console.log（例如target.value）
}
render（）{
const{items}=this.state；
返回(
{items.length&&(
items.map（（项目，索引）=>(
))
)
}
)
}
}
常量项=（{Item，handleChange}）=>(
{item.name}
点击
);
render（，document.getElementById（'root'））；
谢谢您的快速回答！我想我可能得用钥匙，但我该如何才能真正访问那个钥匙呢？例如，我如何将第二个元素的名称值记录到console.log中，或者换句话说，console.log“hannah？”@JacobLockett，您可以在codesandbox中看到控制台！只要点击它。