只是第一次在 React 中尝试 Promises。我有一个基本的 promise (从别人的代码中提取),但不知道如何调整它以使其有用。
到目前为止我所拥有的(在我的 render()
函数中)
var promise = new Promise( (resolve, reject) => {
let name = 'Dave'
if (name === 'Dave') {
resolve("Promise resolved successfully");
}
else {
reject(Error("Promise rejected"));
}
});
promise.then(function(result) {
console.log(result); // "Promise resolved successfully"
}, err => {
console.log(err); // Error: "Promise rejected"
});
果然,当 promise 条件匹配时 (name === 'Dave'
),我的控制台记录 Promise resolved successfully
。
但是,我不知道如何在使用 promise 时为变量赋值。例如:
promise.then(function(result) {
var newName = 'Bob'
}, function(err) {
var newName = 'Anonymous'
});
然后当我尝试在 render()
的 return 语句中返回这个值时,如下所示:
<h2>{newName}</h2>
它说 newName 是未定义的。
我也试过:
promise.then(function(result) {
var newName = result
}, function(err) {
var newName = error
});
...期望这会将 resolve
或 error
字符串分配给 newName
变量,但是没有。
我是不是想错了?当满足我的条件时,我怎样才能使它比仅记录字符串更有用?
任何帮助将不胜感激,因为这真的让我头疼......
更新
render() {
var promise = new Promise( (resolve, reject) => {
let name = 'Paul'
if (name === 'Paul') {
resolve("Promise resolved successfully");
}
else {
reject(Error("Promise rejected"));
}
});
let obj = {newName: ''};
promise.then( result => {
obj["newName"] = result
}, function(error) {
obj["newName"] = error
});
console.log(obj.newName)
return (
<div className="App">
<h1>Hello World</h1>
<h2>{obj.newName}</h2>
</div>
);
}
最佳答案
您以错误的方式使用了 React
。 Promise
旨在稍后返回结果。当您的 promise 被resolved
或 rejected
时,您的 render
将完成执行并且它不会在 promise 完成时更新。
render
方法应该只依赖于 props
和/或 state
来呈现所需的输出。对 prop
或 state
的任何更改都会重新呈现
您的组件。
- 首先,确定您的
Promise
在组件的生命周期中应该去哪里 ( here ) 在您的情况下,我会执行以下操作
在您的构造函数 (ES6) 中或通过
初始化一个状态getInitialState
constructor(props) { super(props); this.state = { name: '', }; }
然后在适合您的
componentWillMount
或componentDidMount
上调用 promisecomponentWillMount() { var promise = new Promise( (resolve, reject) => { let name = 'Paul' if (name === 'Paul') { resolve("Promise resolved successfully"); } else { reject(Error("Promise rejected")); } }); let obj = {newName: ''}; promise.then( result => { this.setState({name: result}); }, function(error) { this.setState({name: error}); }); }
然后在
render
方法中写类似这样的东西。render() { return ( <div className="App"> <h1>Hello World</h1> <h2>{this.state.name}</h2> </div> ); }
关于javascript - 尝试在 Reactjs 中实现一个简单的 promise ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40029867/