Javascript 如何使用react删除元素？（基本查询）

我对React完全是个新手，我曾试图用React构建一个应用程序，但经过几个小时的尝试，我不明白为什么我想删除的元素没有被删除

有两个类似的帖子，他们说你需要为每个元素使用独立的键。我试着这样做，我甚至创建了一个不同的变量，并在每次使用后递增它它只是删除列表的顶部元素。

它的工作原理-1）我有一个数组，其中存储了一些名为

的频道

，我用这些名获取数据，并将数据保存到另一个数组

renderAll

2） 在那之后，我根据我想要如何渲染它们来过滤它们，然后使用函数

renderCards（）

来渲染它们。它还呈现一个按钮，如果单击该按钮，则应从

channel

数组中删除频道，并从

renderAll

数组中删除相应的数据

3） 它还有一个输入字段，您可以从中添加更多频道

什么不起作用-删除按钮删除顶部元素，而不是单击的元素

var-App=React.createClass({
getInitialState（）{
返回{
现状：2
}
},
更改状态（一）{
这是我的国家({
状况：i
});
},
render（）{
返回(
抽动拖缆
);
}
});
const Cards=React.createClass({
getInitialState（）{
返回{
renderAll:[]，
检查：this.props.status，
频道：[“freecodecamp”、“storbeck”、“habathcx”、“meteos”、“RobotCaleb”、“Noobs2nijas”、“brunofin”、“comster404”、“cretetion”、“sheevergaming”、“TR7K”、“OgamingSC2”、“ESL_SC2”]
};
}，//AJAX请求函数
getData（上一个）{
如果（最后===未定义）{
for（设i=0；i{
$.getJSON（“https://api.twitch.tv/kraken/channels/“+频道，（徽标）=>{
if（data.hasOwnProperty（status）==false）{
if（data.stream==null）{
这是我的国家({
renderAll:this.state.renderAll.concat（[{channel:channel，url:`https://www.twitch.tv/${channel}`，状态：“脱机”，徽标：logo.logo}]）
});
}否则{
这是我的国家({
renderAll:this.state.renderAll.concat（[{channel:data.stream.channel.name，url:`https://www.twitch.tv/${channel}`，当前：data.stream.channel.game+'-'+data.stream.channel.status，状态：'online'，logo:logo.logo}]）
});
}
}
});
})  
.失败（（jqxhr）=>{
这是我的国家({
renderAll:this.state.renderAll.concat（[{channel:channel，status:'closed'}]）
});
});
}
}否则{
让channel=this.state.channels[this.state.channels.length-1]；
$.getJSON（“https://api.twitch.tv/kraken/streams/“+通道，（数据）=>{
$.getJSON（“https://api.twitch.tv/kraken/channels/“+频道，（徽标）=>{
if（data.hasOwnProperty（status）==false）{
if（data.stream==null）{
这是我的国家({
renderAll:this.state.renderAll.concat（[{channel:channel，url:`https://www.twitch.tv/${channel}`，状态：“脱机”，徽标：logo.logo}]）
});
}否则{
这是我的国家({
renderAll:this.state.renderAll.concat（[{channel:data.stream.channel.name，url:`https://www.twitch.tv/${channel}`，当前：data.stream.channel.game+'-'+data.stream.channel.status，状态：'online'，logo:logo.logo}]）
});
}
}
});
})  
.失败（（jqxhr）=>{
这是我的国家({
renderAll:this.state.renderAll.concat（[{channel:channel，status:'closed'}]）
});
});
}
},
组件willmount（）{
这是getData（）；
},
组件将接收道具（道具）{
这是我的国家({
支票：道具
});
}，//删除不起作用的函数
删除（索引）{
让newArr=this.state.channels.slice（）；
设newArrSecond=this.state.renderAll.slice（）；
新排列拼接（索引1）；
第二个拼接（索引1）；
这是我的国家({
频道：newArr，
renderAll:newArrSecond
});
}，//渲染卡函数
渲染卡（一）{
如果（i==0 | | i.status==0）{
让cards=this.state.renderAll.map（（项目，i）=>{
如果（item.status===“联机”）{
返回✕ {item.current}

}
});
返回(
卡
)
}else if（i==1 | | i.status==1）{
让cards=this.state.renderAll.map（（项目，i）=>{
如果（item.status===“脱机”）{
返回✕ 频道离线

}
});
返回(
卡
)
}else if（i==2 | | i.status==2）{
让cards=this.state.renderAll.map（（项目，i）=>{
如果（item.status===“脱机”）{
返回✕ 频道离线

}否则，如果（item.status==='online'）{
返回✕{
var App = React.createClass({
    getInitialState() {
        return {
            status: 2
        }
    },
    changeStatus(i) {
        this.setState({
            status: i
        });
    },
    render() {
        return (
            <div>
                <header><h1>Twitch Streamers</h1></header>
                <Tabs status = {this.changeStatus} />
                <Cards status = {this.state.status} />
            </div>
        );
    }
});


const Cards = React.createClass({
    getInitialState() {
        return {
            renderAll: [],
            check: this.props.status,
            channels:  ["freecodecamp", "storbeck", "habathcx","meteos","RobotCaleb","noobs2ninjas","brunofin","comster404","cretetion","sheevergaming","TR7K","OgamingSC2","ESL_SC2"]
        };
    }, //AJAX REQUEST FUNCTION
    getData(last) {
        if(last === undefined) {
            for(let i =0; i<this.state.channels.length;i++) {
                let channel = this.state.channels[i];
                $.getJSON("https://api.twitch.tv/kraken/streams/" + channel, (data) => {
                    $.getJSON("https://api.twitch.tv/kraken/channels/" + channel, (logo) => {
                        if(data.hasOwnProperty(status) === false) {
                            if(data.stream === null) {
                                this.setState({
                                    renderAll: this.state.renderAll.concat([{channel: channel, url: `https://www.twitch.tv/${channel}`, status: 'offline', logo: logo.logo}])
                                });
                            } else {
                                this.setState({
                                    renderAll: this.state.renderAll.concat([{channel: data.stream.channel.name, url: `https://www.twitch.tv/${channel}`, current: data.stream.channel.game + ' - ' + data.stream.channel.status, status: 'online', logo: logo.logo}])
                                });
                            }
                        }
                    });
                })  
                .fail((jqxhr) => {
                    this.setState({
                        renderAll: this.state.renderAll.concat([{channel: channel, status: 'closed'}])
                    });
                });
            }
        } else {
            let channel = this.state.channels[this.state.channels.length - 1];
            $.getJSON("https://api.twitch.tv/kraken/streams/" + channel, (data) => {
                $.getJSON("https://api.twitch.tv/kraken/channels/" + channel, (logo) => {
                    if(data.hasOwnProperty(status) === false) {
                        if(data.stream === null) {
                            this.setState({
                                renderAll: this.state.renderAll.concat([{channel: channel, url: `https://www.twitch.tv/${channel}`, status: 'offline', logo: logo.logo}])
                            });
                        } else {
                            this.setState({
                                renderAll: this.state.renderAll.concat([{channel: data.stream.channel.name, url: `https://www.twitch.tv/${channel}`, current: data.stream.channel.game + ' - ' + data.stream.channel.status, status: 'online', logo: logo.logo}])
                            });
                        }
                    }
                });
            })  
            .fail((jqxhr) => {
                this.setState({
                    renderAll: this.state.renderAll.concat([{channel: channel, status: 'closed'}])
                });
            });
        }
    },
    componentWillMount() {
        this.getData();
    },
    componentWillReceiveProps(prop) {
        this.setState({
            check: prop
        });
    }, //DELETE FUNCTION THAT DOESN'T WORK
    delete(index) {
        let newArr = this.state.channels.slice();
        let newArrSecond = this.state.renderAll.slice();

        newArr.splice(index, 1);
        newArrSecond.splice(index, 1);

        this.setState({
            channels: newArr,
            renderAll: newArrSecond
        });
    }, //RENDER CARDS FUNCTION
    renderCards(i) {
        if(i === 0 || i.status === 0) {
            let cards = this.state.renderAll.map((item, i) => {
                if(item.status === 'online') {
                    return <div className="online cards" key={i}><img src={item.logo} width="30px" height="30px" /><a target="_blank" href={item.url}><h3>{item.channel}</h3></a><button className="cross" onClick={this.delete}>✕</button><p>{item.current}</p></div>
                }
            });
            return (
                cards
            )
        } else if(i === 1 || i.status === 1) {
            let cards = this.state.renderAll.map((item, i) => {
                if(item.status === 'offline') {
                    return <div className="offline cards" key={i}><img src={item.logo} width="30px" height="30px"/><a target="_blank" href={item.url}><h3>{item.channel}</h3></a><button className="cross" onClick={this.delete}>✕</button><p>Channel is offline</p></div>
                }
            });
            return (
                cards
            )
        } else if(i === 2 || i.status === 2) {
            let cards = this.state.renderAll.map((item, i) => {
                if(item.status === 'offline') {
                    return <div className="offline cards" key={i}><img src={item.logo} width="30px" height="30px" /><a target="_blank" href={item.url}><h3>{item.channel}</h3></a><button className="cross" onClick={this.delete}>✕</button><p>Channel is offline</p></div>
                } else if(item.status === 'online') {
                    return <div className="online cards" key={i}><img src={item.logo} width="30px" height="30px" /><a target="_blank" href={item.url}><h3>{item.channel}</h3></a><button className="cross" onClick={this.delete}>✕</button><p>{item.current}</p></div>
                } else {
                    return <div className="closed cards" key={i}><h3>{item.channel}</h3><p>Account Closed</p></div>
                }
            });
            return (
                cards
            )
        }
    },
    newChannel(i) {
        if(i.keyCode === 13) {
            this.setState({channels: this.state.channels.concat([i.target.value])}, function() {
                this.getData(1);
            });
        }
    },
    leave(i) {
        i.target.value = '';
    },
    render() {
        return (
            <div id="cards-inside">
                <input type='text' placeholder="+ Channel" onKeyDown={this.newChannel} onBlur={this.leave}/>
                <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
                    {this.renderCards(this.state.check)}
                </ReactCSSTransitionGroup>
            </div>  
        )
    }
});

ReactDOM.render(<App />, document.getElementById("container-second"));

onClick={this.delete.bind(this, i)}

OnClick={() => {this.delete(i)} }

class MyComponent extends React.Component {
  state = {
    names: ['Foo', 'Bar', 'Git', 'Get']
  };
  [...]
}

render() {
  const names = this.state.names.map(name => {
    return <li key={name} onClick={this.remove.bind(this, name)}>{name}</li>;
  });
  return <ul>{names}</ul>;
}

remove(name) {
  this.setState({
    names: this.state.names.filter(cur => cur !== name)
  });
}