是否有可能将react组件的列表保持在状态并呈现它们？
我最近一直在尝试学习一些React编程，但在学习呈现列表时遇到了一些困惑。
React文档描述了这种呈现列表的方法：
const listItems = numbers.map((number) =>
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);出于好奇，我决定尝试在我的一个组件的状态下保存一个React元素列表，并直接呈现该列表。我认为它可能能够避免每次渲染时将数据映射到元素的需要。
我能够做到这一点：
'use strict';
class List2 extends React.Component {
constructor(props) {
super(props);
let nums = [];
for(let i = 0; i < 5; i++) {
nums.push(React.createElement('div', null, i));
}
this.state = {
numbers : nums,
}
}
render() {
return (
React.createElement('div', null, this.state.numbers)
)
}
}但是，我尝试在我的窗口中添加一个按钮，该按钮将元素添加到元素列表中，但该按钮的onCLick函数添加的新元素不会呈现。这是不起作用的代码：
'use strict';
class List3 extends React.Component {
constructor(props) {
super(props);
this.state = {
nextNum : 1,
numbers : [],
}
this.buttonAction = this.buttonAction.bind(this);
}
buttonAction() {
let numElement = React.createElement('h1', null, this.state.nextNum);
let newNumber = this.state.numbers;
newNumber.push(numElement);
this.setState(
{ nextNum : (state.nextNum + 1),
numbers : newNumbers,
}
);
}
render() {
return (
React.createElement('div', null,
this.state.numbers,
React.createElement('button', {onClick : this.buttonAction}, 'clicketh')
)
)
}
}当我点击按钮时，我没有在屏幕上看到新的数字。
有人能帮我解释一下这是怎么回事吗？上面的映射方法是使用react呈现列表的唯一可靠方法吗？
回答 2
Stack Overflow用户
发布于 2019-03-24 08:21:03
React只渲染那些从上一次渲染以来发生变化的元素，如果你想强制渲染，那么你必须强制react这样做，否则它将不会渲染新的元素。
数组是引用类型，所以如果要添加或删除元素，它不会创建新的副本，react会将其视为未更改。对于渲染问题，您需要在每次添加元素时创建一个"numbers“的新副本，以便react会将其视为已更改的状态，并将其渲染为新的。你可以通过在你的render方法中使用map函数来实现这一点，它将为react提供一个新的数组副本，或者在你的按钮单击事件中使用"slice“，这样当设置新的numbers状态时，它将每次创建一个新的"numbers”的浅副本。
下面是这两种方法的代码片段。
buttonAction() {
let numElement = React.createElement('h1', { key: this.state.nextNum },
this.state.nextNum);
let newNumbers = this.state.numbers;
newNumbers.push(numElement);
this.setState(
{
nextNum: (this.state.nextNum + 1),
numbers: newNumbers.slice(),
}
);
}或者
render() {
return (
React.createElement('div', null,
this.state.numbers.map(item=>item),
React.createElement('button', { onClick: this.buttonAction }, 'clicketh')
)
)
}有关阵列的更多信息，请单击下面的链接。https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Stack Overflow用户
发布于 2019-03-24 05:32:55
我真的不知道你为什么要这么做。
但也许你可以试试这样的东西？
this.setState({
numbers :[...this.state.numbers, numElement],
});创建数字的副本，而不是重用旧的引用。
https://stackoverflow.com/questions/55318346
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号