Baidu didn"t find the reason for it for a while-the error message thrown by the browser was Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment (object) from the React add-ons. Check the render method of App
.
import React , { PureComponent,Component } from "react"
import localStore from "../util/localStore.js"
import {cityName} from "../config/localStoreCity.js"
import { connect } from "react-redux"
import { bindActionCreators } from "redux"
import * as actions from "../actions/action"
class App extends React.Component {
constructor(props,context){
super(props,context);
this.state={
inintdone:false
}
}
render() {
return(
<div>
<div >{this.props.reducerCity}</div>
{
this.state.inintdone ?
this.props.children
:<span> 1...</span>
}
</div>
)
}
componentDidMount(){
let name = localStore.getItem(cityName)
if (name ==null){
name=""
}
setTimeout(()=>{
this.setState({
inintdone :true
})
},1000)
this.props.action.localCity({
cityName: name,
})
}
}
function mapStateToProps(state){
console.log(state);
return state
}
function mapDispatchToProps(dispatch) {
return {
action: bindActionCreators(actions, dispatch)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(App)
my idea is that the cities here will change after dispatch city