reactjs - React - 您可以从外部函数更新未声明的容器状态吗?
问题描述
在来自 Unstated 库的示例中,它们通过与订阅容器的 jsx 按钮交互来更新容器内的状态。
import React from 'react';
import { render } from 'react-dom';
import { Provider, Subscribe, Container } from 'unstated';
type CounterState = {
count: number
};
class CounterContainer extends Container<CounterState> {
state = {
count: 0
};
increment() {
this.setState({ count: this.state.count + 1 });
}
decrement() {
this.setState({ count: this.state.count - 1 });
}
}
function Counter() {
return (
<Subscribe to={[CounterContainer]}>
{counter => (
<div>
<button onClick={() => counter.decrement()}>-</button>
<span>{counter.state.count}</span>
<button onClick={() => counter.increment()}>+</button>
</div>
)}
</Subscribe>
);
}
render(
<Provider>
<Counter />
</Provider>,
document.getElementById('root')
);
有没有办法从容器外部组件中的函数更新容器内的状态?因此,例如,如果我想在返回承诺期间更新状态,我将如何去做。伪代码
login = () => {
let url = baseURL + '/user/login?_format=json';
let data = {
"name": this.state.email,
"pass": this.state.password
};
axios({
url,
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
withCredentials: true,
credentials: 'same-origin',
data,
})
.then(function(result) {
console.log('result:', result);
SET STATE HERE!!!!!!!
counter.increment()
})
.catch(error => console.log('error:', error));
};
解决方案
该问题并非特定于 Unstated,这也适用于使用渲染道具模式的 React 上下文 API。
问题login
在于它的控制流程是有缺陷的。它不能有效地捕获错误,因为它会抑制它们。并且它封装了 Promise 内部,这是一个错误,阻止它被正确测试,对于初学者
它可以公开一个承诺,或接受一个回调,或两者兼而有之:
login = async (cb) => {
...
return axios(...)
.then(function(result) {
if (cb)
cb(result);
return result;
})
.catch(error => console.log('error:', error));
}
可用作:
<button onClick={() => login(() => counter.decrement())}>-</button>
或者:
<button onClick={async () => { await login(); counter.decrement(); }}>-</button>
也可以将login
接受counter
作为参数,但这会将它与不必要的实现结合起来。
推荐阅读
- linux - 使用文本文件(包含文件名)将文件从当前目录复制到新目录
- react-native - 如何将 Blob 保存到 React Native 中的临时本地存储中?
- r - 使用非等宽字体绘制分割字符串的两个部分,产生适当的间距(使用 graphics::text)
- python - 通过bs4获取html表格数据到python
- flutter - 放入 ArCore 世界后编辑对象大小
- c - 关于 creat() 系统调用模式参数的快速问题
- javascript - 如何仅使用 html/css/javascript(没有 jquery 等)在我的搜索框中重置我的列表?
- python - Python 类的类级构造函数
- javascript - 根据 TypeScript 中的条件将数据从一个数组推送到另一个数组
- reactjs - 模拟 useHistory 并期望 toBeCalledWith