React 警告：当我使用 Object.assign() 时，函数作为 React 子级无效答案

【问题标题】：React warning: functions are not valid as a React child when i use Object.assign()React 警告：当我使用 Object.assign() 时，函数作为 React 子级无效
【发布时间】：2019-01-26 13:22:35
【问题描述】：

我将 react 用于前端，将 node 用于后端，我正在尝试从服务器获取数据以更新前端的用户条目。有一个解决方案，我可以使用 Object.assign() 重新呈现用户条目，但问题是我得到了

警告：函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者您可能打算调用此函数而不是返回它。

当我添加 Object.assing() 来编码时，它会导致警告，但在此之前我没有任何问题。在没有警告的情况下重新渲染的解决方案是什么？

这是关于我的问题的代码

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

onButtonSubmit = () => {
    this.setState({imgUrl: this.state.input});

    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(Object.assign(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>
);

这是打印条目的组件

 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;

这是更新条目的服务器端代码

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

为什么只有在添加 Object.assign() 时才会收到此警告？已经2天了，我无法弄清楚

【问题讨论】：

有用信息here.

标签： javascript node.js reactjs

【解决方案1】：

在 React 中，您永远不应该在 setState 调用之外以编程方式手动更新某些内容的状态，这就是您在您的例子。

https://daveceddia.com/why-not-modify-react-state-directly/

【讨论】：

【解决方案2】：

您可以尝试改用the spread operator：

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

【讨论】：

谢谢，它可以工作，但我不再收到警告，但条目似乎在更新时不会重新呈现。