将通过JSON接收的数据共享给其他文件

Question

我有一个问题，通过axios.post共享由个人API接收的数据:

在初始文件中，我有:

axios
.post('myAPIURL', this.state)
.then(response => {
console.log(response.data.token)

我需要与其他文件共享response.data.token来使用这个头文件。例如，在第二个文件中:

const res = await axios.post('myAPIURL', { hello: 'world' }, {
headers: {
'token': // I need for the response.data.token here
}
});

由于有文件交换，我正在丢失数据，我无法简单地导出它们。请帮帮我!

Answer 1

您可以使用上下文将其提供给所有其他组件，而无需进行prop钻取。

// app.js
const TokenContext = React.CreateContext(null)
export default () => {
const [token, setToken] = useState()
// other stuff
useEffect(() => {
const getToken = () => {
// get the token via your api call
const { data: { token }} = await axios.post('myAPIURL', this.state)
setToken(token)
}
}, [])

return <TokenContext.Provider value={token}> 
<ChildComponent />
</TokenContext.Provider>
}
// childComponent.js
export default () => {
const token = useContext(TokenContext)
}

现在您可以从您喜欢的任何组件文件传递令牌。如果你愿意，你也可以存储在本地/会话状态，但是上下文是一种更React的与其他组件共享数据的方式。