console.log在打印空数组时打印两次值,在另一个值中打印从 AJAX 调用获得的值。
下面给出的值打印为'[]'和[“answered”]
我不知道它在哪里被初始化了,我在那里放了一个调试器,它只在那里停了一次,只是为了打印 AJAX 数据值。
{“status”:1,“value”:4、“data”:{“answer_text”:“已回答”} }
class Discuss extends React.Component {
constructor() {
super();
this.state = {
discussions: []
};
}
componentWillMount() {
this._getData();
}
_getAnswerText() {
return this.state.discussions.map(discussion => discussion.answer_text);
};
render() {
const comments = this._getComments();
return ( <div> {comments} <ActionBar answer_text={this._getAnswerText()}/></div > );
});
}
_getData() {
$.ajax({
method: 'GET',
url: '/someurl'
success: (discussions) => {
var array = [];
array.push(discussions);
var dis = []
dis.push(array[0].data)
this.setState({
discussions: dis
});
}
});
}
}
class ActionBar extends React.Component {
constructor(props) {
super(props);
};
render() {
console.log(this.props.answer_text)
return ( <div> {this.props.answer_text} </div>)
};
}
ReactDOM.render(<Discuss/>,document.getElementById('content'));
4条答案
按热度按时间piwo6bdm1#
从index.js中删除StrictMode
<React.StrictMode>
</React.StrictMode>
kg7wmglp2#
React.StrictMode是2018年16.3.0版本中引入的 Package 器。起初,它只适用于类组件,在16.8.0之后,它也适用于钩子。
如发行说明中所述:StrictMode是一个 Package 器,帮助准备应用程序进行异步渲染
为什么要双重渲染?使用React.StrictMode的好处之一是,它可以帮助我们检测渲染阶段生命周期中的意外副作用。
你可以在这个链接上阅读更多关于它的信息:
https://mariosfakiolas.com/blog/my-react-components-render-twice-and-drive-me-crazy/
js5cn81o3#
这很正常 AJAX 调用是异步的,所以你的组件会立即继续呈现,第一次呈现的状态是空数组,它作为一个prop传递给ActionBar。当 AJAX 调用返回时,它填充数组并更新状态,这会导致再次调用render(),从而重新呈现ActionBar沿着更新后的prop。
k4emjkb14#
如果您真的希望记录来自
props
的数据,请将该log
保存在componentWillReceiveProps()
中。因为它会为父Component
中的每个新props
触发只要
props
和state
中有变化,就会调用render()
方法。也就是说,每当您的React.Component
的shouldComponentUpdate()
返回true
时。所以很明显,如果数据
(props or state)
发生了变化,你会看到render()
方法不止一次地执行。从here阅读更多关于
React Component
及其生命周期的信息。**更新:**如果数据为空,只需在
render()
中返回null
即可