Question

我正在映射我的state的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要更改其呈现的项目的名称属性，我希望它仅更改该项目，并且不应影响其他项目。每当我迭代它时，将按钮的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中迭代组件时添加键，我已经添加了它，项组件也可以是功能组件，因为它不处理状态。

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

2 个答案: