Javascript 在React中将数据从子级传递到父级

您好，我正在尝试实现一个非常简单的功能，它将根据传递到函数中的值更新我的状态。该函数在父组件中声明，通过props传递给子组件，并在子组件上调用

我在控制台上不断遇到此错误： 警告：设置状态（…）：无法在现有状态转换期间更新（例如在

渲染

或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数；构造函数的副作用是一种反模式，但可以移动到

componentWillMount

这是我的密码： 父组件

import React, {Component } from "react";
import Sidebar from './Sidebar';
import Content from './Content';

class Tabs extends Component {
    constructor(props){
        super(props);
        this.state={
            message:'Select a name from the tabs menu'

        };
        this.handleName = this.handleName.bind(this);
    }

    componentWillMount () {
        if ('pluginLoaded' in window) {
            (window).pluginLoaded('tabs', function (port: any, context: any) {
                // Future work should interact with the message channel here
            });
        }
    }

    handleName(value){
        if (value === 'Vanessa'){
            console.log(`${value} in da house `)
            this.setState({
                message: 'Vanessa means "butterfly"'
            })
        }


    }

    render() {
        return (
            <div className="Tabs">
                <Sidebar 
                    handleName = {this.handleName}
                />
                <Content
                    message = {this.state.message}
                />


            </div>
        )
    }
}

export default Tabs;

import React from 'react';

const Sidebar = (props) =>{
    let Vanessa= 'Vanessa';
    let Paola = 'Paola';

    return(
        <div className="Sidebar">
            <h1>Tabs</h1>
            <ul>
                <li><a onClick={props.handleName(Vanessa)}>Vanessa</a></li>
                <li><a onClick={props.handleName(Paola)}>Paola</a></li>
            </ul>
        </div>
    )
}


export default Sidebar;

import React，{Component}来自“React”；
从“./Sidebar”导入侧栏；
从“./Content”导入内容；
类选项卡扩展组件{
建造师（道具）{
超级（道具）；
这个州={
消息：“从选项卡菜单中选择一个名称”
};
this.handleName=this.handleName.bind（this）；
}
组件将安装（）{
如果（'pluginload'在窗口中）{
（窗口）.pluginload（'tabs'，函数（端口：任意，上下文：任意）{
//未来的工作应该与此处的消息通道进行交互
});
}
}
handleName（值）{
如果（值=='Vanessa'）{
console.log（`da house`中的${value}）
这是我的国家({
信息：“凡妮莎的意思是“蝴蝶”
})
}
}
render（）{
返回(
)
}
}
导出默认选项卡；

子组件

import React, {Component } from "react";
import Sidebar from './Sidebar';
import Content from './Content';

class Tabs extends Component {
    constructor(props){
        super(props);
        this.state={
            message:'Select a name from the tabs menu'

        };
        this.handleName = this.handleName.bind(this);
    }

    componentWillMount () {
        if ('pluginLoaded' in window) {
            (window).pluginLoaded('tabs', function (port: any, context: any) {
                // Future work should interact with the message channel here
            });
        }
    }

    handleName(value){
        if (value === 'Vanessa'){
            console.log(`${value} in da house `)
            this.setState({
                message: 'Vanessa means "butterfly"'
            })
        }


    }

    render() {
        return (
            <div className="Tabs">
                <Sidebar 
                    handleName = {this.handleName}
                />
                <Content
                    message = {this.state.message}
                />


            </div>
        )
    }
}

export default Tabs;

import React from 'react';

const Sidebar = (props) =>{
    let Vanessa= 'Vanessa';
    let Paola = 'Paola';

    return(
        <div className="Sidebar">
            <h1>Tabs</h1>
            <ul>
                <li><a onClick={props.handleName(Vanessa)}>Vanessa</a></li>
                <li><a onClick={props.handleName(Paola)}>Paola</a></li>
            </ul>
        </div>
    )
}


export default Sidebar;

从“React”导入React；
常量边栏=（道具）=>{
让Vanessa=‘Vanessa’；
让Paola=‘Paola’；
返回(
标签

瓦妮莎
保拉

)
}
导出默认边栏；

而不是：

瓦内萨

尝试：

props.handleName（Vanessa）}>Vanessa
而不是：

瓦内萨

尝试：

props.handleName（Vanessa）}>Vanessa
工作得很好。你是否介意解释一下为什么这是有效的，或者为什么它以前不起作用。我只是想了解为什么这里需要匿名函数。我很感激你的解释，但如果没有时间，那也没什么大不了的@vanegeek在您的版本中，您是在执行函数，而不是将函数作为道具传递。圆括号导致函数执行，因此创建一个匿名函数传递给onClick prop。另一个vay可以使用，例如，
onClick={props.handleName.bind（this，vanesa）}
这也会将事件对象绑定到function@Chanzi请在你的答案中添加更多的上下文，让提问者明白。效果很好。你是否介意解释一下为什么这是有效的，或者为什么它以前不起作用。我只是想了解为什么这里需要匿名函数。我很感激你的解释，但如果没有时间，那也没什么大不了的@vanegeek在您的版本中，您是在执行函数，而不是将函数作为道具传递。圆括号导致函数执行，因此创建一个匿名函数传递给onClick prop。另一个vay可以使用，例如，
onClick={props.handleName.bind（this，vanesa）}
这也会将事件对象绑定到function@Chanzi请在你的答案中添加更多的上下文，以使提问者明白。