gpt4 book ai didi

javascript - React - 为什么当我已经改变状态时我仍然得到相同的结果

转载 作者:行者123 更新时间:2023-11-29 18:00:59 24 4
gpt4 key购买 nike

下面是我的content.jsx

var React = require('react');
var Reflux = require('reflux');

var ApplyInfo = require('./applyInfo');

var Actions = require('../actions/actions');
var DataStore = require('../stores/data-store');


module.exports = React.createClass({
mixins: [
Reflux.listenTo(DataStore, 'onChange'),
],
onChange: function(event, allDatas) {
console.log("o");
this.setState({
applyDatas: allDatas
})
},
getInitialState: function() {
console.log('g');
return {
section: "go_3",
applyDatas: {test : "AAA"}
}
},
componentWillMount: function() {
console.log('c');
Actions.getDatas();
},
render: function() {
console.log("content = " + this.state.applyDatas.test);
return <div>
<div className="content">
<ApplyInfo showValue={this.state.applyDatas.test} print={console.log("showValue = " + this.state.applyDatas.test)} />

.......

下面是我的applyInfo.jsx

var React = require('react');
var Reflux = require('reflux');
var TextInput = require('./TextInput');
var Option = require('./option');
var Actions = require('../actions/actions');


module.exports = React.createClass({
getInitialState: function() {
return {
// .....
applyInfoDatas: this.props.showValue
}
},
render: function() {
console.log("value = " + this.state.applyInfoDatas);
return <div className="section_3">

<div className="info_input">
<div className="demo_a demo2 lll">
<TextInput id="loanAmount" title="loan" showValue={this.state.applyInfoDatas}/>
</div>
</div>

下面是我的data-store.jsx

var Refulx = require('reflux');
var Actions = require('../actions/actions');

var allDatas = {test : "AAB"};
module.exports = Refulx.createStore({
listenables: Actions,

getDatas: function() {
console.log("ready to send allDatas");
this.trigger('change', allDatas);
}
});

这是我的 console.log 来自 chrome 的结果

g
c
content = AAA
showValue = AAA
value = AAA
ready to send allDatas
o
content = AAB
showValue = AAB
value = AAA

为什么我最后仍然得到“value = AAA”,我认为它应该是“AAB”,我在调用 Actions.getDatas 和 setState 时已经更改了它。

最佳答案

看起来您需要更改您的 ApplyInfo 组件。您的测试流程如下:

  • Content.jsx 的状态为“AAA”,并将其作为 prop 传递给 ApplyInfo.jsx
  • ApplyInfo 组件将自己的初始状态设置为“AAA”
  • ApplyInfo 呈现状态 = 'AAA'
  • 将更改存储到“AAB”并发出更改
  • Content.jsx 将状态更新为“AAB”,并将状态作为 prop 传递给 ApplyInfo
  • ApplyInfo 里面的状态没有更新; getInitialState 只被调用一次。第二次组件已经渲染,只会更新,所以不会调用 getInitialState。
  • 因此 ApplyInfo 仍然具有它呈现的状态“AAA”。

两种处理方式:

  1. 您可以简单地将 showValues 呈现为 Prop 。 (但是您需要在 TextInput 组件中使用 onChange 函数)
  2. 添加一个 componentWillReceiveProps 来更新你的状态(查看@zvona 的回答)

广告 1. 要使 ApplyInfos.jsx 简单地呈现新的 showValue:

module.exports = React.createClass({
render: function() {
console.log("value = " + this.props.showValue);
return <div className="section_3">

<div className="info_input">
<div className="demo_a demo2 lll">
<TextInput id="loanAmount" title="loan" showValue={this.props.showValue}/>
</div>
</div>

关于javascript - React - 为什么当我已经改变状态时我仍然得到相同的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35008879/

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