xu wenjie
xu wenjie

Reputation: 1

when i use mobx with react-router here is a warning

Warning: Provider: It is not recommended to assign props directly to state because updates to props won't be reflected in state. In most cases, it is better to use props directly.

here is the router.js

const router = () => {
return (
        <Provider {...stores}>
            <Router>
                <div>
                    <Route exact path="/" component={Home} />
                </div>
            </Router>
        </Provider>
  )
}

export default router;

Home.js

class Home extends Component {

  componentDidMount() {
  }

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

 export default Home

TodoList.js

@inject('todoStore')
@observer
class TodoList extends Component {
    componentDidMount() {
        console.log(this.props)
    }
    render () {
        const name = this.props.todoStore;
        return (
            <div>
                <span>{name}</span>
            </div>
        )
    }
}

export default TodoList;

here is code

Upvotes: 0

Views: 919

Answers (2)

eduludi
eduludi

Reputation: 1693

This is a complain from React 16.5.0. And looks like this is something mobx-react need to solve. Here you can read more about that: https://github.com/mobxjs/mobx-react/issues/545

Upvotes: 1

Hemadri Dasari
Hemadri Dasari

Reputation: 33994

Assign your props like below and call them wherever required

render () {
    const { todoStore } = this.props;
    return (
        <div>
            <span>{todoStore}</span>
        </div>
    )
 }

Upvotes: 0

Related Questions