未捕获的类型错误：无法使用 React Hooks/Context API 在字符串上创建属性"头像"

Question

我已经从我的上下文文件中传递了一个状态变量和函数：

用户上下文：

import React, { useState } from 'react';
const UserContext = React.createContext();
function UserProvider({ children }) {
var [userImages, setUserImages] = useState({
avatar: '/static/uploads/profile-avatars/placeholder.jpg'
});
return (
<UserContext.Provider
value={{
userImages,
setUserImages
}}
>
{children}
</UserContext.Provider>
);
}
export default UserContext;
export { UserProvider };

在这一点上UserImages只是一个带有一个道具的对象，即avatar

这是我的应用程序，它正在由提供者包装(请忽略redux实现，我只是想尝试上下文(

import React from 'react';
import { Provider } from 'react-redux';
import { UserProvider } from './UserContext';
import App from 'next/app';
import withRedux from 'next-redux-wrapper';
import { PersistGate } from 'redux-persist/integration/react';
import reduxStore from '../store/index';
import withReactRouter from '../with-react-router/with-react-router';

class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
const pageProps = Component.getInitialProps
? await Component.getInitialProps(ctx)
: {};
return { pageProps };
}
render() {
const { Component, pageProps, store } = this.props;
return (
<UserProvider>
<Provider store={store}>
<PersistGate persistor={store.__PERSISTOR} loading={null}>
<Component {...pageProps} />
</PersistGate>
</Provider>
</UserProvider>
);
}
}

这是一个组成部分，即ImageUploader我想使用这种状态：

import { useState } from 'react';
import { Card, Icon, Image, Segment, Form } from 'semantic-ui-react';
import axios from 'axios';
function ImageUploader({ userData }) {
var { avatar } = userData.userImages;
var setUserAvatar = userData.setUserImages;
function avatarUpdater(avatarPath) {
var obj = {};
return (obj.avatar = avatarPath);
}
console.log('setUserAvatar ', setUserAvatar);
function fileUploader(e) {
console.log('event fileUploader ', e);
var imageFormObj = new FormData();
console.log('e.target.files[0] ', e.target.files[0]);
imageFormObj.append('imageName', 'multer-image-' + Date.now());
imageFormObj.append('imageData', e.target.files[0]);
setUserAvatar(
avatarUpdater('/static/uploads/profile-avatars/' + URL.createObjectURL(e.target.files[0])));
axios
.post(`/users/uploadmulter`, imageFormObj)
.then(data => {
if (data.data.success) {
console.log('Image has been successfully uploaded using multer');
console.log('avatar ', avatar);
}
})
.catch(err => {
console.log('Error while uploading image using multer');
});
}
return (
<>
<Segment>
<Card fluid>
<Image src={avatar} />
</Card
</Segment>
</>
);
}
export default ImageUploader;

现在在ImageUploader我有这个函数，我要传递给setUserAvatar

function avatarUpdater(avatarPath) {
return (userData.userImages.avatar = avatarPath);
}

认为这会起作用，但我没有回来：

Uncaught TypeError: Cannot create property 'avatar' on string '/static/uploads/profile-avatars/blob:http://localhost:8016/9039feda-f18b-43a7-b3a3-b7a32a7896f0'
at avatarUpdater (ImageUploader.jsx?e724:14)
at fileUploader (ImageUploader.jsx?e724:28)
at onChange (ImageUploader.jsx?e724:63)
at HTMLUnknownElement.callCallback (react-dom.development.js:347)
at Object.invokeGuardedCallbackDev (react-dom.development.js:397)
at invokeGuardedCallback (react-dom.development.js:454)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:468)
at executeDispatch (react-dom.development.js:600)
at executeDispatchesInOrder (react-dom.development.js:622)
at executeDispatchesAndRelease (react-dom.development.js:725)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:733)
at forEachAccumulated (react-dom.development.js:707)
at runEventsInBatch (react-dom.development.js:750)
at runExtractedPluginEventsInBatch (react-dom.development.js:881)
at handleTopLevel (react-dom.development.js:5901)
at batchedEventUpdates$1 (react-dom.development.js:21657)
at batchedEventUpdates (react-dom.development.js:2348)
at dispatchEventForPluginEventSystem (react-dom.development.js:5996)
at dispatchEvent (react-dom.development.js:6025)
avatarUpdater @ ImageUploader.jsx?e724:14
fileUploader @ ImageUploader.jsx?e724:27
onChange @ ImageUploader.jsx?e724:63
callCallback @ react-dom.development.js:347
invokeGuardedCallbackDev @ react-dom.development.js:397
invokeGuardedCallback @ react-dom.development.js:454
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:468
executeDispatch @ react-dom.development.js:600
executeDispatchesInOrder @ react-dom.development.js:622
executeDispatchesAndRelease @ react-dom.development.js:725
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:733
forEachAccumulated @ react-dom.development.js:707
runEventsInBatch @ react-dom.development.js:750
runExtractedPluginEventsInBatch @ react-dom.development.js:881
handleTopLevel @ react-dom.development.js:5901
batchedEventUpdates$1 @ react-dom.development.js:21657
batchedEventUpdates @ react-dom.development.js:2348
dispatchEventForPluginEventSystem @ react-dom.development.js:5996
dispatchEvent @ react-dom.development.js:6025
react-dom.development.js:487 Uncaught TypeError: Cannot create property 'avatar' on string '/static/uploads/profile-avatars/blob:http://localhost:8016/9039feda-f18b-43a7-b3a3-b7a32a7896f0'
at avatarUpdater (ImageUploader.jsx?e724:14)
at fileUploader (ImageUploader.jsx?e724:28)
at onChange (ImageUploader.jsx?e724:63)
at HTMLUnknownElement.callCallback (react-dom.development.js:347)
at Object.invokeGuardedCallbackDev (react-dom.development.js:397)
at invokeGuardedCallback (react-dom.development.js:454)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:468)
at executeDispatch (react-dom.development.js:600)
at executeDispatchesInOrder (react-dom.development.js:622)
at executeDispatchesAndRelease (react-dom.development.js:725)
at executeDispatchesAndReleaseTopLevel (react-dom.development.js:733)
at forEachAccumulated (react-dom.development.js:707)
at runEventsInBatch (react-dom.development.js:750)
at runExtractedPluginEventsInBatch (react-dom.development.js:881)
at handleTopLevel (react-dom.development.js:5901)
at batchedEventUpdates$1 (react-dom.development.js:21657)
at batchedEventUpdates (react-dom.development.js:2348)
at dispatchEventForPluginEventSystem (react-dom.development.js:5996)
at dispatchEvent (react-dom.development.js:6025)

谁能帮我弄清楚为什么更新程序/调度会提到一个 blob，而它应该只是为组件中的头像设置路径/字符串？

Answer 1

像userData.userImages.avatar = avatarPath一样直接改变状态是一种不好的做法。 您应该返回下一个状态值作为setUserAvatar的{ avatar: avatarPath }。

fwiw，返回求值userData.userImages.avatar = avatarPath结果在avatarPath(字符串(被返回给setUserAvatar，这导致userImages被更新为字符串而不是对象。