在 React 中映射数组
Mapping over arrays in React
我正在映射我所在州的项目 属性 中对象数组中的每个对象。问题是,我希望能够为每个退回的商品附加一个按钮,该按钮仅适用于该商品,而不适用于其他商品。这是我目前拥有的:
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>
)
}
}
因此,例如,如果按钮的效果是更改其呈现的项目的名称 属性,我希望它 仅 更改该项目并且没有其他项目应该受到影响。每当我遍历它时,它都会将按钮的效果附加到每个项目,所以如果我为一个项目单击它,我实际上是为所有项目单击它,而这正是我不想要的。
对于那些好奇的人,我在 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>
})}
这样,您可以将单个 item
作为参数传入,因此当您编写 handleChange
时,您可以只使用该项目而不是整个项目来做任何您想做的事情大批。
在 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'));
我正在映射我所在州的项目 属性 中对象数组中的每个对象。问题是,我希望能够为每个退回的商品附加一个按钮,该按钮仅适用于该商品,而不适用于其他商品。这是我目前拥有的:
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>
)
}
}
因此,例如,如果按钮的效果是更改其呈现的项目的名称 属性,我希望它 仅 更改该项目并且没有其他项目应该受到影响。每当我遍历它时,它都会将按钮的效果附加到每个项目,所以如果我为一个项目单击它,我实际上是为所有项目单击它,而这正是我不想要的。
对于那些好奇的人,我在 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>
})}
这样,您可以将单个 item
作为参数传入,因此当您编写 handleChange
时,您可以只使用该项目而不是整个项目来做任何您想做的事情大批。
在 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'));