Question

我有一个基本的反应应用程序（CRA）和mobx，我只想得到满意空间的所有条目。

有一个简单的商店，我可以在反应控制台中看到我的条目，但我找不到在我的组件中显示它的方法。

class ProjetsStore {

@observable projets = {}

@action fetchAll(){
window.fetch(`${API_BASE_URL}/spaces/${API_SPACE_ID}/entries?
access_token=${API_KEY}&content_type=projet`)
.then(res => res.json())
.then(prj => this.projets = prj)

该组件实际上是非常基本的，但无论我尝试什么，即使反应工具中的this.props.projetsStore中存在所有内容，我也找不到简单显示任何内容的方法。

@inject(['projetsStore'])
@observer

class Projets extends Component {

componentDidMount() {
  this.props.projetsStore.fetchAll()
}

render() {
  return (
    <div>
       ...
    </div>
)
}
}

如果有人可以指示我指向某个方向或重新获取资源，只需使用mobx从api中获取数据，并通过提供商将其作为道具，那就太棒了。

感谢。

Answer 1

我不熟悉mobx，我不知道你的商店如何运作，但我相信你必须在组件本身设置数据，或者？

@inject(['projetsStore'])
@observer

class Projets extends Component {

componentDidMount() {
  this.props.projetsStore.fetchAll()
    .then(data => this.setState({data})
}

Answer 2

您需要使用<Provider> mobx-react包中的<Provider projetsStore={projetsStore}> <Projets /> </Provider>打包您的顶级组件。

@inject('projetsStore')
@observer
class Projets extends Component {

componentDidMount() {
    this.props.projetsStore.fetchAll()
  }

然后使用字符串注入，而不是数组。

ul {
    left: 20%;
    top: 10%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
    overflow: hidden;
    background: radial-gradient(circle, #505050, #3E3E3E);
    width: 50%;
}

li {
    display: inline-block;
    float: left;
    width: 24%;
    margin: 0;
    padding: 0;
    border-right: 1px solid #232323;
}

/* Remove border from last tab */
li:last-child {
    border: none;
}

li:first-child {
    border: none;
}

/* Setting up the text on the menu */
li a {
    text-align: center;
    font: Verdana;
    font-size: 16px;
    display: inline-block;
    color: #EAE0D2;
    margin: 0;
    padding: 20px 20px;
    text-decoration: none;
    width: 25%;
}

/* Change the link color on hover */
li a:hover {

    background: linear-gradient(#2B2B2B, #232323);
    border:none;
    width: 83%;
}

/* Color the active tab */
.active {
    background: linear-gradient(#3E3E3E, #2B2B2B);
    color: #white;
}

mobx contenful simple api call

2 个答案: