Question

我创建了一个Container类和一个InnerElement类。 Container包裹InnerElement的位置。必须在给定的时间仅显示一个InnerElement。

当我换成另一个InnerElement时出现问题。有趣的是，当我创建console.log时，它会显示更改后的元素，但不会呈现。有人可以给我一个提示，谢谢！！

Container类：

import React from 'react';

export default class Container extends React.Component {

    constructor(props) {
        super(props);

        this.changeElement = this.changeElement.bind(this);

        this.state = {
            currentElement: 0,
        }
    }

    changeElement() {
        const nextElement = this.state.currentElement + 1;
        this.setState({currentElement: nextElement});
    }

    render() {
        const element = this.props.children[this.state.currentElement];
        // In the console log the next (correct) element is shown
        console.log(element);

        return (
            <div>
                {element}
                <button onClick={this.changeElement}>next element</button>
            </div>
        );
    }
}

这里是InnerElement类：

import React from 'react';
export default class InnerElement extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            name: props.name ? props.name : "test"
        }
    }

    render() {
        return (
            <div>
                {this.state.name}
            </div>
        );
    }
}

在这里，我的Container和InnerElement通话：

<Container>
    <InnerElement name="A" />
    <InnerElement name="B" />
    <InnerElement name="C" />
    <InnerElement name="D" />
</Container>

我还发现，当我使用InnerElement this.props.name而不是状态时，它可以工作。

Answer 1

由于您正在动态修改子代，因此无法确定您的子代是否与setState一起变化。为了帮助React做到这一点，您可以将一个密钥添加到您的InnerElement中：

<Container>
  <InnerElement key="A" name="A" />
  <InnerElement key="B" name="B" />
  <InnerElement key="C" name="C" />
  <InnerElement key="D" name="D" />
</Container>

ReactJS组件状态未按预期更改

1 个答案: