// topic-detail/index.jsx
import React from 'react'
import { observer, inject } from 'mobx-react'
import PropTypes from 'prop-types'

@inject((stores) => {
return {
topicStore: stores.topicStore,
}
}) @observer
export default class TopicDetail extends React.Component {
componentDidMount() {
// something
}

render() {
const topic = this.props.topicStore.topics[0]
return (
<div style={{ marginTop: 100 }}>
{topic ? topic.title : 'hahah'}
</div>
)
}
}

在detai page 写了一段这样的代码 可每次渲染/detai出来都是haha。在componmentDidMount console了一下：

this.props.topicStore.topics[0]

this.props.topicStore.topics

不知道为什么取不到Store里的值

列表页跟着老师走是正常的 在详情页学习之前我想简单的自己试一下 不知道这块问什么，希望老师能帮我看看。很困扰

附：

//topic-store.js
import { observable, action, extendObservable } from 'mobx'
import { topicSchema } from '../util/variable-define'
import { get } from '../util/http'

const createTopic = (topic) => {
return Object.assign({}, topicSchema, topic)
}

class Topic {
constructor(data) {
extendObservable(this, data)
}
@observable syncing = false
}

class TopicStore {
@observable topics
@observable syncing

constructor({ syncing, topics } = { syncing: false, topics: [] }) {
this.syncing = syncing
this.topics = topics.map(topic => new Topic(createTopic(topic)))
}

addTopic(topic) {
this.topics.push(new Topic(createTopic(topic)))
}

@action fetchTopic(tab) {
return new Promise((resolve, reject) => {
this.syncing = true
this.topics = []
get('/topics', {
mdrender: false,
tab,
}).then((resp) => {
if (resp.success) {
resp.data.forEach((topic) => {
this.addTopic(topic)
})
resolve()
} else {
reject()
}
this.syncing = false
}).catch((err) => {
reject(err)
this.syncing = false
})
})
}
}

export default TopicStore