从自定义挂钩导入的状态值未显示

Question

我创建了一个自定义钩子custom.js:

import React, {useState, useEffect} from 'react';
import Clarifai from 'clarifai';
const app = new Clarifai.App({
apiKey: 'XXXXXXXXXXXXXX'
})
const Custom = () => {
const [input, setInput] = useState('');
const [imgUrl, setImgUrl] = useState('');
function onInputChange (text) {
setInput(text);
}
useEffect(()=>{  
setImgUrl(input)
}, [input])

function onSubmit () {
console.log('submitted');
console.log(imgUrl)
app.models.predict(Clarifai.COLOR_MODEL, "https://www.takemefishing.org/getmedia/bde1c54e-3a5f-4aa3-af1f-f2b99cd6f38d/best-fishing-times-facebook.jpg?width=1200&height=630&ext=.jpg").then(
function(response) {
console.log(response);
},
function(err) {
// there was an error
}
);
}
return {input, imgUrl, onInputChange, onSubmit}
}

export default Custom;

我将这个自定义钩子导入到我的其他两个组件FaceRecognition.js和InputForm.js中

FaceRecognition.js:

import React from 'react';
import Custom from '../Custom';
const FaceRecognition = () => {
const { imgUrl } = Custom();
function yes (){
return console.log(imgUrl)
}
yes()
return (
<div>
<h1 className='white'>The url is {ImgUrl} </h1>
<img width={'50%'} alt=''src={imgUrl}/>
</div>
);
}

export default FaceRecognition;

ImportForm.js:

import React, {useState} from 'react';
import './InputForm.css'
import Custom from '../Custom';

const InputForm = () => {
const { onInputChange, onSubmit } = Custom();

return (
<>
<p className='txt f3'>Enter image link address</p>
<div className='center flex w-70'>
<input type='text' className='w-80 pa1' onChange={(e)=>onInputChange(e.target.value)}/>
<button className='w-20 pa1 pointer' onClick={onSubmit}>Detect</button>
</div>
</>
);
}

export default InputForm;

函数onSubmit和onImputChange按预期工作于InputForm.js，当函数onSubmit运行时，imgUrl的值会按预期记录在控制台上。但是，作为字符串的imgUrl状态无法在上面我的FaceRecognition.js片段中的h1标签<h1 className='white'>The url is {imgUrl} boy</h1>之间显示，并且它也不能作为h1标签下面的图像<img width={'50%'} alt=''src={imgUrl}/>的src工作。这是我的问题。

Answer 1

问题

React钩子不会神奇地共享状态。这个Custom函数有两个独立的实例，每个实例都有自己的useState钩子。我说"；函数"；因为你也把钩子的名字弄错了。所有React钩子都应该用一个"；使用-"；前缀，以便React可以识别它并对其应用钩子规则。

解决方案

如果您希望useCustom钩子的单独实例共享状态，则需要将该状态提升到要共享的公共组件。为此，您应该使用React Context。

示例：

import React, { createContext, useContext, useState, useEffect } from 'react';
import Clarifai from 'clarifai';
const app = new Clarifai.App({
apiKey: 'XXXXXXXXX'
});
const CustomContext = createContext({
input: '',
imgUrl: '',
onInputChange: () => {},
onSubmit: () => {}
});
const useCustom = () => useContext(CustomContext);
const CustomProvider = ({ children }) => {
const [input, setInput] = useState('');
const [imgUrl, setImgUrl] = useState('');
function onInputChange (text) {
setInput(text);
}
useEffect(()=>{  
setImgUrl(input);
}, [input]);
function onSubmit () {
console.log('submitted');
console.log(imgUrl);
app.models.predict(
Clarifai.COLOR_MODEL,
"https://www.takemefishing.org/getmedia/bde1c54e-3a5f-4aa3-af1f-f2b99cd6f38d/best-fishing-times-facebook.jpg?width=1200&height=630&ext=.jpg"
).then(
function(response) {
console.log(response);
},
function(err) {
// there was an error
}
);
}
return (
<CustomContext.Provider value={{ input, imgUrl, onInputChange, onSubmit }}>
{children}
</CustomContext.Provider>
);
}
export {
CustomContext,
useCustom
};

export default CustomProvider;

用法：

使用CustomProvider组件包装应用程序。

import CustomProvider from '../path/to/CustomProvider';
...
return (
<CustomProvider>
<App />
</CustomProvider>
);

在使用者中导入并使用useCustom挂钩。

import React from 'react';
import { useCustom } from '../path/to/CustomProvider';
const FaceRecognition = () => {
const { imgUrl } = useCustom();
useEffect(() => {
console.log(imgUrl);
});
return (
<div>
<h1 className='white'>The url is {ImgUrl}</h1>
<img width={'50%'} alt='' src={imgUrl}/>
</div>
);
}

export default FaceRecognition;

import React, {useState} from 'react';
import './InputForm.css'
import { useCustom } from '../path/to/CustomProvider';
const InputForm = () => {
const { onInputChange, onSubmit } = useCustom();
return (
<>
<p className='txt f3'>Enter image link address</p>
<div className='center flex w-70'>
<input
type='text'
className='w-80 pa1'
onChange={(e) => onInputChange(e.target.value)}
/>
<button
className='w-20 pa1 pointer'
onClick={onSubmit}
>
Detect
</button>
</div>
</>
);
}

export default InputForm;

Answer 2

尝试将您的return语句放入预测的.then中