如果使用 map() 渲染，如何从子组件更改父组件的状态答案

【问题标题】：How to change Parent component's state from Child component if it's rendering with map()如果使用 map() 渲染，如何从子组件更改父组件的状态
【发布时间】：2019-04-07 22:44:57
【问题描述】：

我有一个问题 - 我需要从子组件更改父组件的状态。我尝试了带有道具的标准变体，但对我来说没有帮助。

这是父组件的代码：

class ThemesBlock extends React.Component {
constructor(props){
    super(props);
    this.state = {
        currentThemeId: 0
    }
}

changeState(n){
    this.setState({currentThemeId: n})
}

render() {
    let { data } = this.props;

    return (
        data.map(function (item) {
            return <Theme key={item.id} data={item} changeState= 
{item.changeState}/>
        })
    )
 }
}

这是我的子组件代码：

class Theme extends React.Component {
constructor(props){
    super(props);
    this.changeState = this.props.changeState.bind(this);
}

render() {
    const { id, themename } = this.props.data;
    const link = '#themespeakers' + id;

    return (
        <li><a href={link} onClick={() => this.changeState(id)} 
 className="theme">{themename}</a></li>
    )
  }
 }

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您是否尝试在返回之前移动 map()？像这样：

render() {
    let { data } = this.props;

    const outputTheme = data.map(function (item) {
        return <Theme key={item.id} data={item} changeState= {item.changeState}/>
    })

    return (
        {outputTheme}
    )
 }

【讨论】：

【解决方案2】：

主要问题是changeState 应该绑定到ThemesBlock 实例，而不是Theme 实例（通过ThemesBlock）。

这是我在 ThemesBlock 构造函数中绑定它的示例（我还对其进行了更新以显示选择的主题 ID）：

class ThemesBlock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentThemeId: 0
        }
        this.changeState = this.changeState.bind(this);
    }

    changeState(n) {
        this.setState({currentThemeId: n})
    }

    render() {
        let { data } = this.props;

        return (
            <div>
                <div>
                Current theme ID: {this.state.currentThemeId}
                </div>
                {data.map(item => {
                    return <Theme key={item.id} data={item} changeState={this.changeState} />
                })}
            </div>
        )
    }
}

class Theme extends React.Component {
    constructor(props) {
        super(props);
        this.changeState = this.props.changeState.bind(this);
    }

    render() {
        const {
            data: {
                id,
                themename
            },
            changeState
        } = this.props;
        const link = '#themespeakers' + id;

        return (
            <li><a href={link} onClick={() => changeState(id)} className="theme">{themename}</a></li>
        )
    }
}


const data = [
    {id: 1, themename: "One"},
    {id: 2, themename: "Two"},
    {id: 3, themename: "Three"}
];
ReactDOM.render(
  <ThemesBlock data={data} />,
  document.getElementById("root")
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>

【讨论】：