在 React 中映射数组

Question

我正在映射状态项属性内的对象数组中的每个对象。问题是，我希望能够为每个返回的项目附加一个按钮，该按钮仅适用于该项目，而不适用于其他项目。到目前为止，这是我所拥有的：

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 要更改它所呈现的项目的 name 属性，我希望它仅更改该项目，而不应影响其他项目。每当我遍历它时，它都会将按钮的 fx 附加到每个项目，所以如果我单击它，我真的会为所有项目单击它，而这正是我不想要的。

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

此外，当前在 handleChange 中运行的 fx 只是我试图找出值和操作数组内嵌套对象的解决方案的一些麻烦。

Answer 1

我认为您想将单个元素传递给您的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>
   })}

这样，您将拥有单独的item 作为参数传入，因此当您编写handleChange 时，您可以只使用该项目而不是整个数组来做任何您想做的事情。

Answer 2

在CodeSandBox 上试试这个重构的代码， 你必须在 React 中迭代组件时添加键，我已经添加了它，Item 组件也可以是 function 组件，因为它不处理状态。 p>

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