ReactJS 组件状态未按预期更改

Question

我创建了一个 Container class 和一个 InnerElement class。 Container 包裹 InnerElement 的地方。在给定时间只显示一个 InnerElement 是必要的。

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

Container class:

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 class:

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

React 无法确定您的子项随 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 组件状态未按预期更改

ReactJS component state does not change as expected

reactjs

react-props

react-state