反应JS |通过 Promises 接收作为常量或服务器值的 props 的组件
ReactJS | Component to receive props either as constant or server values with Promises
我使用 Formik
制作了一个小的可重用组件。这是非常基本的。图书馆的例子是一个很好的起点,所以我在下面分享它以及 URL
:
Code Sandbox for Formik Example
import React from "react";
import { render } from "react-dom";
import { Formik, Field } from "formik";
function Checkbox(props) {
return (
<Field name={props.name}>
{({ field, form }) => (
<label>
<input
type="checkbox"
{...props}
checked={field.value.includes(props.value)}
onChange={() => {
if (field.value.includes(props.value)) {
const nextValue = field.value.filter(
value => value !== props.value
);
form.setFieldValue(props.name, nextValue);
} else {
const nextValue = field.value.concat(props.value);
form.setFieldValue(props.name, nextValue);
}
}}
/>
{props.value}
</label>
)}
</Field>
);
}
function App() {
return (
<Formik
initialValues={{
roles: ["admin"]
}}
onSubmit={values => alert(JSON.stringify(values, null, 2))}
>
{formik => (
<div>
<div>
<Checkbox name="roles" value="admin" />
<Checkbox name="roles" value="customer" />
</div>
<button onClick={formik.submitForm}>submit</button>
<pre>{JSON.stringify(formik.values, null, 2)}</pre>
</div>
)}
</Formik>
);
}
render(<App />, document.getElementById("root"));
我正在传递 Checkbox 的道具而不是硬编码值,它具有字符串(使用 PropTypes
)。这个占位符道具然后由我传递的值填充,具体取决于 Constants.js
文件的用法,就像这样。
const NameForCheckbox = {
Name1: 'Value1',
Name2: 'Value2',
Name3: 'Value3',
};
export default NameForCheckbox; // Tha is working just fine.
问题:
我们将来可能会从 Server Payload
中获取此信息。这将使我的方法过时,所以为了将来证明它,我想让它在不存在服务器数据时呈现我的数据,或者在有服务器值时绕过它们。
现在,我正在阅读如何做,我发现 Promises 能够解决我的问题。我尝试了各种我不会在这里列出的东西,因为我在 Stack Overflow 中的其他答案中发现不正确。如果你能在这里帮助我,我将不胜感激。
我的设置:
到现在为止,我是这样做的,可能完全不能用,但我会列出来。
我使用 redux(GetDataAttempt, GetDataSucces, GetDatFailure
) 创建了 3 个 Actions。其中 return 向该特定端点发出 GET
请求。反过来,这将使用一些 RxJS 函数,例如
import { of } from 'rxjs';
import { switchMap, map, catchError } from 'rxjs/operators';
import { observableFromHttpPromise, combineAndIsolateEpics } from 'utilities/epicsUtil';
import { Type, Actions } from '../actions';
const getDataEpic = (action$, store, deps) =>
action$.ofType(Type.GET_DATA_ATTEMPT).pipe(
switchMap(() =>
observableFromHttpPromise(deps.getData()).pipe(
map(result => Actions.getDataSuccess(result && result.data)),
catchError(error => of(Actions.getDataFailure(error && error.message)))
)
)
);
const getAllEpics = combineAndIsolateEpics(getDataEpic);
export default getAllEpics;
最后,reducer 会将有效负载发送到我用 MapStateToProps
或空字符串读取的组件。
现在到了棘手的部分和我问的原因。 如何使用 Promises 将此条件逻辑应用于组件。 或其他。
我不确定我是否理解 promises 在这里有多大变化。
如果我的理解正确,您希望在 NameForCheckbox
中显示静态内容,除非存在某些服务器信息。显然获取这些信息是异步的。
最简单的实现可能是在组件安装时分派您的 API 请求(可能通过操作)。同时,您可以使用一些简单的条件逻辑显示 NameForCheckbox
中的值,以显示 API 数据(如果存在)或复选框。
import NameForCheckbox from './NameForCheckbox';
class Checkboxes extends React.Component {
componentDidMount = () => {
// dispatch async action here that will eventually populate the
// apiData prop below
}
renderCheckboxes = data => {
// insert rendering logic here
}
render() {
const { apiData } = this.props;
const data = someData || NameForCheckbox;
return this.renderCheckboxes(data);
}
}
const mapStateToProps = state => ({
apiData: state.reducer.data || null;
})
请注意当 apiData 为假时(null
或 ''
,如您建议的那样),data
如何落入默认数据,但是当数据来自API 存在于状态中,它将渲染它。
在等待数据 return 时设置加载动画也很常见,因此您也可以从 loading = true
的初始状态开始,然后设置 loading = false
当 API 操作成功完成时。
// In reducer
const initialState = {
loading: true,
apiData: null
}
// In component
render() {
const { apiData, loading } = this.props;
if (loading) return <Loading />;
return this.renderCheckboxes(apiData);
}
我使用 Formik
制作了一个小的可重用组件。这是非常基本的。图书馆的例子是一个很好的起点,所以我在下面分享它以及 URL
:
Code Sandbox for Formik Example
import React from "react";
import { render } from "react-dom";
import { Formik, Field } from "formik";
function Checkbox(props) {
return (
<Field name={props.name}>
{({ field, form }) => (
<label>
<input
type="checkbox"
{...props}
checked={field.value.includes(props.value)}
onChange={() => {
if (field.value.includes(props.value)) {
const nextValue = field.value.filter(
value => value !== props.value
);
form.setFieldValue(props.name, nextValue);
} else {
const nextValue = field.value.concat(props.value);
form.setFieldValue(props.name, nextValue);
}
}}
/>
{props.value}
</label>
)}
</Field>
);
}
function App() {
return (
<Formik
initialValues={{
roles: ["admin"]
}}
onSubmit={values => alert(JSON.stringify(values, null, 2))}
>
{formik => (
<div>
<div>
<Checkbox name="roles" value="admin" />
<Checkbox name="roles" value="customer" />
</div>
<button onClick={formik.submitForm}>submit</button>
<pre>{JSON.stringify(formik.values, null, 2)}</pre>
</div>
)}
</Formik>
);
}
render(<App />, document.getElementById("root"));
我正在传递 Checkbox 的道具而不是硬编码值,它具有字符串(使用 PropTypes
)。这个占位符道具然后由我传递的值填充,具体取决于 Constants.js
文件的用法,就像这样。
const NameForCheckbox = {
Name1: 'Value1',
Name2: 'Value2',
Name3: 'Value3',
};
export default NameForCheckbox; // Tha is working just fine.
问题:
我们将来可能会从 Server Payload
中获取此信息。这将使我的方法过时,所以为了将来证明它,我想让它在不存在服务器数据时呈现我的数据,或者在有服务器值时绕过它们。
现在,我正在阅读如何做,我发现 Promises 能够解决我的问题。我尝试了各种我不会在这里列出的东西,因为我在 Stack Overflow 中的其他答案中发现不正确。如果你能在这里帮助我,我将不胜感激。
我的设置: 到现在为止,我是这样做的,可能完全不能用,但我会列出来。
我使用 redux(GetDataAttempt, GetDataSucces, GetDatFailure
) 创建了 3 个 Actions。其中 return 向该特定端点发出 GET
请求。反过来,这将使用一些 RxJS 函数,例如
import { of } from 'rxjs';
import { switchMap, map, catchError } from 'rxjs/operators';
import { observableFromHttpPromise, combineAndIsolateEpics } from 'utilities/epicsUtil';
import { Type, Actions } from '../actions';
const getDataEpic = (action$, store, deps) =>
action$.ofType(Type.GET_DATA_ATTEMPT).pipe(
switchMap(() =>
observableFromHttpPromise(deps.getData()).pipe(
map(result => Actions.getDataSuccess(result && result.data)),
catchError(error => of(Actions.getDataFailure(error && error.message)))
)
)
);
const getAllEpics = combineAndIsolateEpics(getDataEpic);
export default getAllEpics;
最后,reducer 会将有效负载发送到我用 MapStateToProps
或空字符串读取的组件。
现在到了棘手的部分和我问的原因。 如何使用 Promises 将此条件逻辑应用于组件。 或其他。
我不确定我是否理解 promises 在这里有多大变化。
如果我的理解正确,您希望在 NameForCheckbox
中显示静态内容,除非存在某些服务器信息。显然获取这些信息是异步的。
最简单的实现可能是在组件安装时分派您的 API 请求(可能通过操作)。同时,您可以使用一些简单的条件逻辑显示 NameForCheckbox
中的值,以显示 API 数据(如果存在)或复选框。
import NameForCheckbox from './NameForCheckbox';
class Checkboxes extends React.Component {
componentDidMount = () => {
// dispatch async action here that will eventually populate the
// apiData prop below
}
renderCheckboxes = data => {
// insert rendering logic here
}
render() {
const { apiData } = this.props;
const data = someData || NameForCheckbox;
return this.renderCheckboxes(data);
}
}
const mapStateToProps = state => ({
apiData: state.reducer.data || null;
})
请注意当 apiData 为假时(null
或 ''
,如您建议的那样),data
如何落入默认数据,但是当数据来自API 存在于状态中,它将渲染它。
在等待数据 return 时设置加载动画也很常见,因此您也可以从 loading = true
的初始状态开始,然后设置 loading = false
当 API 操作成功完成时。
// In reducer
const initialState = {
loading: true,
apiData: null
}
// In component
render() {
const { apiData, loading } = this.props;
if (loading) return <Loading />;
return this.renderCheckboxes(apiData);
}