Javascript 反应设置状态不会重新渲染

我正在开发一个用于前端和后端节点的自我项目React，该应用程序的一部分是，当用户提交图像url时，它会计算条目数，并在服务器中更新，然后它会在前端重新呈现到屏幕上。问题是它没有重新渲染，我已经测试了console.log，所有东西都可以从服务器端工作，问题是react wont re render中的设置状态，我希望有人能帮助我理解它为什么不工作

下面是与我的问题相关的代码

class App extends Component {
  constructor() {
    super()
    this.state = {
      input: '',
      imgUrl: '',
      box: {},
      route: 'signin',
      isSignedIn: false,
      user: {
        id: '',
        name: '',
        email: '',
        entries: 0,
        joined: '',
      },
    }
  }
  loadUser = data => {
    this.setState({
      user: {
        id: data.id,
        name: data.name,
        email: data.email,
        entries: data.entries,
        joined: data.joined,
      },
    })
  }

  onButtonSubmit = () => {
    fetch('http://localhost:3001/image', {
      method: 'put',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        id: this.state.user.id,
      }),
    })
      .then(response => response.json)
      .then(count => {
        this.setState({ ...this.state.user, entries: count })
      })



      .catch(err => console.log(err))
  }
}

 render() {
  return (
    <div className="App">
      <Navigation
        isSignedIn={this.state.isSignedIn}
        onRouteChange={this.onRouteChange}
      />
      {this.state.route === 'home' ? (
        <div>
          <Rank
            name={this.state.user.name}
            entries={this.state.user.entries}
          />
          <ImageLinkForm
            onInputChange={this.onInputChange}
            onButtonSubmit={this.onButtonSubmit}
          />
          <FaceRecognition box={this.state.box} imgUrl={this.state.imgUrl} />
        </div>
      ) : this.state.route === 'signin' ? (
        <Signin loadUser={this.loadUser} onRouteChange={this.onRouteChange} />
      ) : (
        <Register
          loadUser={this.loadUser}
          onRouteChange={this.onRouteChange}
        />
      )}
    </div>
  )
}

这里是服务器端，其中条目将被更新并发送到前端

app.put('/image', (req, res) => {
  const { id } = req.body
  let found = false
  database.users.forEach(user => {
    if (user.id === id) {
      found = true
      user.entries++
      return res.json(user.entries)
    }
  })
  if (!found) {
    res.status(400).json('not found')
  }
})

下面是打印条目的排名组件

import React from 'react';

 const Rank = ({ name, entries}) => {

return (
 <div>
  <div className='rank'>
  {`${name} your current rank is...`}
  </div>
  <div className='white f1 '>
    {entries}
  </div>
 </div>

  );
 }
 export default Rank;

从“React”导入React；
常量秩=（{name，entries}）=>{
返回(
{${name}您当前的排名是…`}
{entries}
);
}
导出默认等级；

---

提前感谢。

我看不出在setState中执行…this.state.user有任何用处

改变

  this.setState({...this.state.user, entries: count})

到

---

不需要传播整个用户对象<代码>设置状态将更新合并到状态。因此，仅在

setState

中声明更改。顺便说一下，

'http://localhost:3001/image“

为您提供所有与用户相关的数据或仅计数？它为我提供条目计数（基本上是来自服务器的一个数字）。如果直到

setState

一切正常，请尝试将

this.setState（{…this.state.user，entries:count}）

更改为this

this.setState（{user:{…this.state.user，entries:count}}）

这应该可以解决，但是现在我得到了一个警告：函数作为React子函数无效。如果您返回一个组件而不是从render返回，则可能会发生这种情况。或者您可能想调用这个函数而不是返回它。我还尝试了这个.setState（Object.assign（this.state.user，{entries:count}））但它也给了我同样的警告。尝试了之后，仍然条目计数不会重新渲染。实际上，通过这样做，您可以在名为

entries

的状态中创建新的道具，该道具位于状态中的

user

对象之外。但您在渲染中使用的是

this.state.user.entries

。

  this.setState({...this.state.user, entries: count})

  this.setState({entries: count})