我有一个名为NTCPDiamondScreen的组件/屏幕.js我在其中发起了一个名为ProjectContext的上下文.js(并在其中使用了useReducer(的post请求，以便管理操作/状态。我不知道为什么我会收到无法处理的实体 422 错误，即使当我在 Postman 上测试它时，它工作正常，没有任何错误：
Request failed with status code 422
- node_modulesaxioslibcorecreateError.js:15:17 in createError
- node_modulesaxioslibcoresettle.js:16:9 in settle
- node_modulesaxioslibadaptersxhr.js:52:6 in handleLoad
- node_modulesevent-target-shimdistevent-target-shim.js:818:39 in
EventTarget.prototype.dispatchEvent
- node_modulesreact-nativeLibrariesNetworkXMLHttpRequest.js:566:23 in setReadyState
- node_modulesreact-nativeLibrariesNetworkXMLHttpRequest.js:388:25 in __didCompleteResponse
- node_modulesreact-nativeLibrariesvendoremitterEventEmitter.js:190:12 in emit
- node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:436:47 in __callFunction
- node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:111:26 in __guard$argument_0
- node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:384:10 in __guard
- node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:110:17 in __guard$argument_0
* [native code]:null in callFunctionReturnFlushedQueue
NTCPDiamondScreen.js
import React, { useRef, useState, useContext, useEffect } from "react";
import {
Dimensions,
PanResponder,
View,
StyleSheet,
Text,
Alert,
AsyncStorage,
} from "react-native";
import { Button } from "react-native-elements";
import Svg, { Polyline } from "react-native-svg";
import RadioForm from "react-native-simple-radio-button";
import Loader from "../components/Loader";
import { Context as ProjectContext } from "../context/ProjectContext";
import { navigate } from "../navigationRef";
const examplePath = [];
var diamond = [
{ criteria: { novelty: "", technology: "", complexity: "", pace: "" } },
];
var retrievingObjForStorage = {};
const retrievingObjForStorageFunc = async () => {
try {
const retrievingObjForStorageString = await AsyncStorage.getItem(
"Project&CompanyDetails"
);
retrievingObjForStorage = JSON.parse(retrievingObjForStorageString);
} catch (err1) {
console.log(err1);
}
};
var technology = [
{ label: "Super-high", value: "Super-high" },
{ label: "High", value: "High" },
{ label: "Medium", value: "Medium" },
{ label: "Low", value: "Low" },
];
var pace = [
{ label: "Regular", value: "Regular" },
{ label: "Fast", value: "Fast" },
{ label: "Time-critical", value: "Time-critical" },
{ label: "Blitz", value: "Blitz" },
];
var complexity = [
{ label: "Assembly", value: "Assembly" },
{ label: "System", value: "System" },
{ label: "Array", value: "Array" },
];
var novelty = [
{ label: "Derivative", value: "Derivative" },
{ label: "Platform", value: "Platform" },
{ label: "Breakthrough", value: "Breakthrough" },
];
const GesturePath = ({ path, color, children }) => {
const { width, height } = Dimensions.get("window");
const points = path.map((p) => `${p.x},${p.y}`).join(" ");
return (
<>
<Svg
height="400"
width="400"
viewBox={`0 0 ${width} ${height}`}
//style={{ borderWidth: 5, borderColor: "black" }}
>
<Polyline points={points} fill="none" stroke={color} strokeWidth="5" />
</Svg>
{children}
</>
);
};
const GestureRecorder = ({ onPathChanged, children }) => {
const pathRef = useRef([]);
const panResponder = useRef(
PanResponder.create({
//onStartShouldSetPanResponder: () => true,
// onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
// onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: () => true,
onPanResponderGrant: () => {
pathRef.current = [];
},
onPanResponderMove: (event) => {
pathRef.current.push({
x: event.nativeEvent.locationX,
y: event.nativeEvent.locationY,
});
onPathChanged([...pathRef.current]);
},
onPanResponderRelease: () => {
onPathChanged([...pathRef.current]);
},
})
).current;
return (
<View
style={[StyleSheet.absoluteFill, styles.container]}
{...panResponder.panHandlers}
>
{children}
</View>
);
};
const NTCPDiamondScreen = () => {
useEffect(() => {
retrievingObjForStorageFunc();
}, []);
const [path, setPath] = useState(examplePath);
const [techVal, setTechVal] = useState("");
const [noveltyVal, setNoveltyVal] = useState("");
const [complexityVal, setComplexityVal] = useState("");
const [paceVal, setPaceVal] = useState("");
const [loading, setLoading] = useState(false);
const { addNewProject } = useContext(ProjectContext);
const resetState = () => {
setPath([]);
setTechVal("");
setNoveltyVal("");
setComplexityVal("");
setPaceVal("");
};
const createTwoButtonAlert = () =>
Alert.alert(
"Success",
"Your new project is successfully added!",
[{ text: "OK", onPress: () => console.log("OK Pressed") }],
{ cancelable: false }
);
const {
projectName,
projectDescription,
projectBudget,
projectDuration,
industry,
companyName,
numberOfEmployees,
} = retrievingObjForStorage;
return (
<View
style={{
flex: 1,
backgroundColor: "#fff",
// /position: "absolute",
}}
>
<Loader loading={loading} />
<Button
title="Press the buttons (and join them by lines, optional) to make your diamond"
onPress={() => {}}
type="solid"
buttonStyle={{
backgroundColor: "#33CCFF",
}}
titleStyle={{ fontFamily: "sans-serif-light" }}
/>
<View
style={{
flex: 1,
borderWidth: 1,
borderColor: "#E7F0F0",
marginTop: 16,
marginBottom: 30,
}}
>
<GesturePath path={path} color="#33CCFF"></GesturePath>
<GestureRecorder onPathChanged={setPath}></GestureRecorder>
</View>
<View
style={{
//borderColor: "blue",
//borderWidth: 5,
position: "absolute",
marginTop: 80,
marginLeft: 30,
//flex: 1,
backgroundColor: "rgba(255, 255, 255, 0.001)",
}}
>
<View
style={{
paddingLeft: 145,
postion: "absolute",
}}
>
<Text
style={{
fontSize: 10,
fontFamily: "sans-serif-light",
fontStyle: "italic",
paddingLeft: 30,
color: "#B4BFC3",
}}
>
Technology
</Text>
<RadioForm
radio_props={technology}
initial={-1}
onPress={(value) => {
setTechVal(value);
diamond[0].criteria.technology = techVal;
//console.log(`Tech = ${newDiamond[0].newCriteria.technology}`);
}}
buttonColor={"#33CCFF"}
buttonSize={10}
selectedButtonColor={"#33CCFF"}
labelStyle={{
fontFamily: "sans-serif-light",
fontSize: 7,
}}
style={{}}
/>
</View>
<View style={{ flexDirection: "row" }}>
<View>
<View
style={{
marginRight: 10,
}}
>
<Text
style={{
fontSize: 10,
fontFamily: "sans-serif-light",
fontStyle: "italic",
paddingLeft: 30,
paddingBottom: 5,
color: "#B4BFC3",
}}
>
Novelty
</Text>
<RadioForm
radio_props={novelty}
initial={-1}
formHorizontal={true}
labelHorizontal={false}
onPress={(value) => {
setNoveltyVal(value);
diamond[0].criteria.novelty = noveltyVal;
}}
buttonColor={"#33CCFF"}
buttonSize={10}
selectedButtonColor={"#33CCFF"}
labelStyle={{
fontFamily: "sans-serif-light",
fontSize: 7,
}}
/>
</View>
</View>
<View
style={{
marginLeft: 40,
}}
>
<Text
style={{
fontSize: 10,
fontFamily: "sans-serif-light",
fontStyle: "italic",
paddingLeft: 30,
paddingBottom: 5,
color: "#B4BFC3",
}}
>
Complexity
</Text>
<RadioForm
radio_props={complexity}
initial={-1}
formHorizontal={true}
labelHorizontal={false}
onPress={(value) => {
setComplexityVal(value);
diamond[0].criteria.complexity = complexityVal;
}}
buttonColor={"#33CCFF"}
buttonSize={10}
selectedButtonColor={"#33CCFF"}
labelStyle={{
fontFamily: "sans-serif-light",
fontSize: 7,
}}
/>
</View>
</View>
<View
style={{
paddingLeft: 145,
}}
>
<Text
style={{
fontSize: 10,
fontFamily: "sans-serif-light",
fontStyle: "italic",
paddingLeft: 30,
color: "#B4BFC3",
}}
>
Pace
</Text>
<RadioForm
radio_props={pace}
initial={-1}
onPress={(value) => {
setPaceVal(value);
diamond[0].criteria.pace = paceVal;
}}
buttonColor={"#33CCFF"}
buttonSize={10}
selectedButtonColor={"#33CCFF"}
labelStyle={{
fontFamily: "sans-serif-light",
fontSize: 7,
}}
style={{}}
/>
</View>
</View>
<Button
title="Save and Continue"
onPress={() => {
setLoading(true);
setTimeout(() => {
setLoading(false);
console.log(diamond);
addNewProject({
projectName,
projectDescription,
projectBudget,
projectDuration,
industry,
companyName,
numberOfEmployees,
diamond,
});
createTwoButtonAlert();
resetState();
navigate("ViewProjects");
}, 2500);
}}
type="solid"
buttonStyle={{
backgroundColor: "#33CCFF",
marginBottom: 10,
}}
titleStyle={{ fontFamily: "sans-serif-light" }}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: "rgba(255,255,255,0.01)",
},
});
NTCPDiamondScreen.navigationOptions = {
title: "Create New Diamond",
};
export default NTCPDiamondScreen;
项目上下文.js
import createDataContext from "./createDataContext";
import diamondApi from "../api/diamondApi";
const projectReducer = (state, action) => {
switch (action.type) {
case "add_user_error":
return { ...state, userErrorMessage: action.payload };
case "clear_user_error_message":
return { ...state, userErrorMessage: "" };
default:
return state;
}
};
const addNewProject = (dispatch) => async ({
projectName,
projectDescription,
projectBudget,
projectDuration,
industry,
companyName,
numberOfEmployees,
diamond,
}) => {
try {
await diamondApi.post("/projects", {
projectName,
projectDescription,
projectBudget,
projectDuration,
industry,
companyName,
numberOfEmployees,
diamond,
});
} catch (err) {
console.log(err);
dispatch({
type: "add_user_error",
payload: "Could not post project. Go back and try again.",
});
}
};
const clearUserErrorMessage = (dispatch) => () => {
dispatch({
type: "clear_user_error_message",
});
};
export const { Provider, Context } = createDataContext(
projectReducer,
{ addNewProject, clearUserErrorMessage },
{ userErrorMessage: "" }
);
包含 axios 实例的文件 (diamondApi.js(：
import axios from "axios";
import { AsyncStorage } from "react-native";
const instance = axios.create({
baseURL: "http://5b4bc1a6edd6.ngrok.io",
});
instance.interceptors.request.use(
async (config) => {
const token = await AsyncStorage.getItem("token");
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(err) => {
return Promise.reject(err);
}
);
export default instance;
您是否在模拟器上运行您的 react 本机项目。您还可以添加背景的端点吗？