我的问题非常特别:在我的.env文件中，我在有我的api url的行中放了一个注释:

API_URL=https://6ec1259f.ngrok.io #comment

当我尝试登录/注册时，我会得到不变违反错误，因为api url是错误的。

通常这是因为你没有正确地解构。以下面的代码为例:

const Button = text => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

我们用= text =>参数声明它。但实际上，React希望这是一个包揽一切的props对象。

所以我们真的应该这样做:

const Button = props => <button>{props.text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

注意到区别了吗?这里的props参数可以被命名为任何东西(props只是与命名法相匹配的惯例)，React只是期望一个具有键和val的对象。

使用对象解构，你可以这样做，也经常会看到这样的东西:

const Button = ({ text }) => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

.．.这工作。

有可能，任何偶然发现这一点的人只是不小心声明了他们组件的props参数而没有解构。

在我的情况下，它是我忘记从渲染函数返回html元素，我返回一个对象。我所做的是我只是包装了一个html元素的{items} -一个简单的div像下面

<ul>{项目}</ul>

我的错误是这样写的:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff} </p>)
})

而不是:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff.name} </p>)
})

这意味着我试图渲染对象而不是其中的值。

编辑:这是反应不是本机。

我只是得到了相同的错误，但由于不同的错误:我使用了双括号，如:

{{count}}

插入count的值而不是正确的值:

{count}

编译器可能将其转换为{{count: count}}，即试图将一个对象作为React子对象插入。

这是我的代码:

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      value: null,
      getDatacall : null
    }
    this.getData = this.getData.bind(this)
  }
  getData() {
  //   if (this.state.getDatacall === false) {
    sleep(4000)
    returnData("what is the time").then(value => this.setState({value, getDatacall:true}))
    // }
  }
  componentDidMount() {
    sleep(4000)

    this.getData()
  }
  render() {
    this.getData()
    sleep(4000)
    console.log(this.state.value)
    return (
      <p> { this.state.value } </p>
    )
  }
}

我就遇到了这个错误。我不得不把它改成

 render() {
    this.getData()
    sleep(4000)
    console.log(this.state.value)
    return (
      <p> { JSON.stringify(this.state.value) } </p>
    )
  }

希望这能帮助到一些人!