Question

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

我一直在控制台上收到此错误：警告：setState（...）：在现有状态转换期间无法更新（例如在render或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数;构造函数副作用是反模式，但可以移动到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;

Answer 1

而不是：

<li><a onClick={props.handleName(Vanessa)}>Vanessa</a></li>

尝试：

<li><a onClick={() => props.handleName(Vanessa)}>Vanessa</a></li>

在React中将数据从子节点传递到父节点

1 个答案: