What is the reason for the react error in this place?

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

{this.props.reducerCity} < / div >, but why the amount is misreported. And I console here at mapStateToProps. Why it was executed twice. The first pass parameter is empty. The second time I have my corresponding parameters.


The

error prompt has already said:
found: object with keys {}, your render function says

.
<div  >{this.props.reducerCity}</div>

actually read your code should be

<div  >{this.props.reducerCity.cityName}</div>

both sides of the execution may be because your settimeout modified state, will cause the page to be re-rendered


the problem lies in this.props.reducerCity .

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b2d39f-4d218.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b2d39f-4d218.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?