gpt4 book ai didi

javascript - React 组件不会在状态更改时重新渲染

转载 作者:行者123 更新时间:2023-12-03 12:57:58 28 4
gpt4 key购买 nike

我有一个 React 类,它将通过 API 来获取内容。我已确认数据正在返回,但没有重新渲染:

var DealsList = React.createClass({
getInitialState: function() {
return { deals: [] };
},
componentDidMount: function() {
this.loadDealsFromServer();
},
loadDealsFromServer: function() {
var newDeals = [];

chrome.runtime.sendMessage({ action: "findDeals", personId: this.props.person.id }, function(deals) {
newDeals = deals;
});

this.setState({ deals: newDeals });
},
render: function() {
var dealNodes = this.state.deals.map(function(deal, index) {
return (
<Deal deal={deal} key={index} />
);
});
return (
<div className="deals">
<table>
<thead>
<tr>
<td>Name</td>
<td>Amount</td>
<td>Stage</td>
<td>Probability</td>
<td>Status</td>
<td>Exp. Close</td>
</tr>
</thead>
<tbody>
{dealNodes}
</tbody>
</table>
</div>
);
}
});

但是,如果我添加如下所示的调试器,则会填充newDeals,然后一旦我继续,我就会看到数据:

  loadDealsFromServer: function() {
var newDeals = [];

chrome.runtime.sendMessage({ action: "findDeals", personId: this.props.person.id }, function(deals) {
newDeals = deals;
});
debugger
this.setState({ deals: newDeals });
},

这就是所谓的交易列表:

var Gmail = React.createClass({
render: function() {
return (
<div className="main">
<div className="panel">
<DealsList person={this.props.person} />
</div>
</div>
);
}
});

最佳答案

我的情况有点不同。我认为许多像我这样的新手会被难住 - 所以在这里分享。

我的状态变量是使用 useState 管理的 JSON 对象数组,如下所示:

const [toCompare, setToCompare] = useState([]);

但是,当使用 setToCompare 更新 toCompare 时,如下面的函数所示 - 重新渲染将不会触发。将其移动到不同的组件也不起作用。只有当其他一些事件触发重新渲染时,更新的列表才会显示。

const addUniversityToCompare = async(chiptoadd) =>
{
var currentToCompare = toCompare;
currentToCompare.push(chiptoadd);
setToCompare(currentToCompare);
}

这就是我的解决方案。基本上 - 分配数组是复制引用 - 并且 react 不会将其视为更改 - 因为对数组的引用没有被更改 - 只有其中的内容。因此,在下面的代码中 - 只是使用切片复制了数组 - 没有任何更改 - 并在 mods 之后将其分配回。工作得很好。

const addUniversityToCompare = async (chiptoadd) => {
var currentToCompare = toCompare.slice();
currentToCompare.push(chiptoadd);
setToCompare(currentToCompare);
}

希望它能帮助像我这样的人。如果您觉得我错了,或者还有其他方法,请告诉我。

提前致谢。

关于javascript - React 组件不会在状态更改时重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25937369/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com