Question

我在前端使用React，在后端使用Node，我正在尝试从服务器获取数据以更新前端的用户条目。有一种解决方案，我可以使用Object.assign（）重新呈现用户条目，但问题是我得到了

警告：函数作为React子代无效。如果返回Component而不是从render返回，则可能会发生这种情况。或者也许您打算调用此函数而不是返回它。

当我添加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天了，我无法弄清

Answer 1

在React中，您永远不要在 setState 调用之外以编程方式手动更新某些事物的状态，这就是您在自己的 Object.assign 中使用时要执行的操作例子。

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

Answer 2

您可以改用the spread operator：

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

React警告：当我使用Object.assign（）时，函数作为React子元素无效

2 个答案: