阵营 - 通过从Axios公司REQ数据到另一个组件
问题描述:
我想从Axios公司REQ是在一个单独的部件到另一部件传递数据。我将用我的代码片断来解释更详细的内容。阵营 - 通过从Axios公司REQ数据到另一个组件
在我的doorsLayout.js我正在拨打一个地址的Axios电话。我正在获取res中的数据。
this.serverRequest = axios
.get('http://blablabla/locks')
.then(res => {
// Rerender state
this.setState({
res,
dataToDisplay: res.data.slice(0, numToDisplay || 5)
})
})
然后(在同一个文件),我想提出一个所谓的新组件doorsItem.js这里:
const items = dataToDisplay.map(item => <DoorsItem item={item} />)
而且DoorsItem内的我输出从Axios公司的呼叫数据:
const DoorsItem = ({ item }) =>
<Grid>
<Row key={item._id} className="show-grid">
<Col md={12}>
<ul style={{ marginTop: '10px' }}>
<li className="info-container">
<h4 className="title-text-container">{item.address.street}</h4>
{/*etc etc*/}
因此,我可以输出所有从Axios调用中获得的信息与{item.hello*}
。但是在同一个文件中,我也想输出其他内容,但是来自不同的Axios需求。
<DropdownButton
title="Lägg till ny användare"
id="bg-nested-dropdown"
>
<MenuItem eventKey="1" style={{ marginLeft: '500px' }}>
{/*Different Axios data here!*/}
</MenuItem>
</DropdownButton>
我要输出的数据在此组件中发现:users.js
this.serverRequest = axios
.get('http://blablabla/customers') <-- Just a different endpoint
.then(res => {
// Rerender state
this.setState({
res,
dataToDisplay: res.data.slice(0, numToDisplay || 5),
})
})
而像在doorsItem.js我有相同类型的布局在userItem .js文件:
const UsersItem = ({ item }) =>
<Row
key={item._id}
className="show-grid"
style={{ margin: '-15px 0 -15px 0' }}
>
<Col md={12}>
<ul style={{ marginTop: '10px' }}>
<li className="info-container">
<div>
<h5 className="title-text-container">{`${item.name} ${item.surname}`}</h5>
因此,这里是我的问题。如果我想输出'http://blablabla/customers'
数据在我doorsItem
什么是最简单的和“最好”的方式来做到这一点?因为我打得四处一点,当我点击下拉我只看到一个名,因为这个名字与一个ID相关联。但我只想要从'http://blablabla/customers'
的所有名称下拉。
很抱歉,如果我的问题是乱了!但感谢阅读!
答
有两两件事你可以做:
它处理所有的请求,并将数据作为道具子组件制作容器组件。
介绍共享存储对象,像终极版或MobX一样。
有时候你会想从Redux的状态移动反应状态(当 存储东西终极版变得笨拙)或周围的其他方法(当 多个组件需要有访问一些国家曾经是 地方)。
意识到你是在哪种情况。
PS。我选择将大部分时间的请求数据存储在共享的Redux对象中。
感谢您的回复。我不确定如何使用共享的Redux对象。 –
如果您仅限于React状态,请记住react有单向数据流 - 这意味着如果您希望两个组件共享相同的数据,则它们必须具有共同的祖先,并将该数据传递给它们。应该有帮助:https://facebook.github.io/react/docs/thinking-in-react.html#step-4-identify-where-your-state-should-live – Tomasz