首页 > 解决方案 > 从 React 的返回方法中的数组中删除元素

问题描述

有一个 React 组件通过 props 接收一些值:

class MyClass {
    render() {
        const {
            values,
            shouldRemove,
        } = this.props;
    }

    return (...);
}

如果shouldRemove存在,则values必须删除最后一个值。

我无法在 return 语句开始之前删除它,因为我需要 return 的第一部分的最后一个值。

因此,如果数组中存在,我尝试将其设置value为空 但没有用。shouldRemovevalues

return (
    <Table.Body>
        {values.map((value, valueIndex) => (
            //here I need that value too
        )}
        //from here I don't need it anymore
        {shouldRemove ? value = [] : value} // I added this line to set the element to empty. didn't work
        {value.map((item, itemIndex) => {
            //do something
        })
        }
    </Table.Body>
);

关于如何values在第一步运行后删除该元素数组的任何想法?

标签: javascriptreactjsecmascript-6

解决方案


您可以在render().

render() {
    const {
      values,
      shouldRemove,
    } = this.props;

    const valuesAfterRemoval = shouldRemove ?
      values.slice(0, values.length-1) :
      values;

    return (
        <Table.Body>
            {values.map((value, valueIndex) => (
                // here I need that value too
            )}

            {valuesAfterRemoval.map((item, itemIndex) => {
                // do something
            })
        </Table.Body>
    );
}

推荐阅读