- map函数返回一个新的数组,在map的回调函数里,迭代每一项的时候也必须有返回值。
- forEach 没有返回值
forEach情况
import React, { Component } from "react"
import ListItem from './ListItem'
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: '',
list: ['bb', 'ccc']
};
this.changeInput = this.changeInput.bind(this);
}
changeInput(e) {
this.setState({
inputValue: e.target.value
})
}
commitInput = () => {
const newList = JSON.parse(JSON.stringify(this.state.list));
newList.push(this.state.inputValue);
this.setState({
list: newList,
inputValue: ''
})
}
deleteItem = index => {
this.state.list.splice(index, 1);
this.setState ({
list: this.state.list
})
}
componentDidMount() {
console.log('parent didmount')
}
render() {
console.log('parent render')
const elements = []
this.state.list.forEach((item, index) => {
elements.push(
<ListItem
key={index}
content={item}
index={index}
deleteItem={(index) => { this.deleteItem(index) }}
/>
)
})
{
console.log('zzz')
}
return (
<div>
<input type="text" value={this.state.inputValue} onChange={this.changeInput} />
<button onClick={this.commitInput}>提交</button>
<ul>
{
console.log('mmm')
}
{
elements
}
</ul>
</div>
)
}
}
export default TodoList
map 情况
import React, { Component } from "react"
import ListItem from './ListItem'
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: '',
list: ['bb', 'ccc']
};
this.changeInput = this.changeInput.bind(this);
}
changeInput(e) {
this.setState({
inputValue: e.target.value
})
}
commitInput = () => {
const newList = JSON.parse(JSON.stringify(this.state.list));
newList.push(this.state.inputValue);
this.setState({
list: newList,
inputValue: ''
})
}
deleteItem = index => {
this.state.list.splice(index, 1);
this.setState ({
list: this.state.list
})
}
componentDidMount() {
console.log('parent didmount')
}
render() {
console.log('parent render')
return (
<div>
<input type="text" value={this.state.inputValue} onChange={this.changeInput} />
<button onClick={this.commitInput}>提交</button>
<ul>
{
this.state.list.map((item, index) => {
return(
<ListItem
key={index}
content={item}
index={index}
deleteItem={(index) => { this.deleteItem(index) }}
/>
)
})
}
</ul>
</div>
)
}
}
export default TodoList