在多个项目中更改按钮上的文本（React.js）

Question

我是使用React的新手。我有一系列数据，其中每个项目中都有一个按钮，单击它必须更改特殊div的文本，但是问题是，单击一个项目的按钮时，所有项目中的div文本被改变了。我希望当我单击按钮时，所关注项目中的div文本应该更改。主要问题是当第二个项目单击时，第一个项目文本将消失，第二个项目的文本是第一个项目的文本。谢谢。

class App extends React.Component {
constructor(props, context) {
    super(props, context);
    this.state = {
        data: [],
        num: 0,
    };
    $.ajax({
        url: "/json.bc",
        type: "get",
        success: (result) => {
            this.setState({ data: eval(result) });
        }
    })
}
renderFlight() {
    return this.state.data.map((item, i) => {
        return (
            <div class="item">
                <div class="btn" onClick={((e) => this.rueldep(e, item, i))}>click</div>
                <div class="text">
                    {(this.state.num == i + 1) ? this.state.rueldepTxt : null}
                </div>
            </div>
        )
    })
}
rueldep = (e, item, index) => {
    var desc = item.info.departureinformation.routeshow.description
    return this.setState({
        rueldepTxt: desc,
        num: index + 1
    });
};
render() {
    return (
        <div>{this.renderFlight()}</div>
    )
} 
}
ReactDOM.render(<App />, document.getElementById('Result'));