React setState不会重新渲染

Question

我正在开发一个用于前端的自我项目React和用于后端的节点，应用程序的一部分是，当用户提交图像URL时，它会对条目进行计数，然后在服务器中进行更新，然后它应该重新呈现屏幕的前端。问题是它没有重新渲染，我测试了console.log，一切都在服务器端工作，问题是在setState中反应不会重新渲染，我希望任何人都能帮助我理解为什么它是不工作？

这是与我的问题相关的代码

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>
  )
}

这段代码假设在屏幕上打印条目计数但不是

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

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

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;

提前致谢。

Answer 1

我没有看到在setState中使用... this.state.user的任何用法

更改

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

至

  this.setState({entries: count})