时间戳

首页 > 解决方案 > 如何在 React 中按另一个过滤数组？

javascript - 如何在 React 中按另一个过滤数组？

问题描述

我推入的所有内容都arr1应该从 的映射中删除arr2，而是返回新的推入值。这是为什么？

const [arr1, setArr1] = React.useState([]);
const arr2= ['banana', 'coconut', 'milk']

React.useEffect(() => {
    initList()
}, [])

function add (t) {
    setArr1(...arr1, t.currentTarget.value)
    console.log('arr1: ' + arr1)
}

function initList () {
    setArr1(arr2.filter(arr2 => !(arr1.includes(arr2))).map(arr2 => 
        <li>
            <input
                onChange={add} 
                type='radio'
                name='arr1'
                value={arr2}
                id={arr2}
            />
            <label
                for={arr2}
            >
                {arr2}
            </label>
        </li>
    ));
}

return (
    <div>
        {arr1}
    </div>
)

标签： javascriptarraysreactjsstatespread

解决方案

  1. 不要让 JSX 元素保持状态 (arr1)。状态变量只有数据。
  2. setArr1(...arr1, t.currentTarget.value) --> 此处未设置为数组。更新到 setArr1([...arr1, t.currentTarget.value])

试试这个片段。

const Test = () => {
const [arr1, setArr1] = React.useState([]);
const arr2= ['banana', 'coconut', 'milk']

function add (t) {
    setArr1([...arr1, t.currentTarget.value])
    console.log('arr1: ' + arr1)
}


return (
    <div>
        {arr2.filter(arr2 => !(arr1.includes(arr2))).map(arr2 => 
        <li>
            <input
                onChange={add} 
                type='radio'
                name='arr1'
                value={arr2}
                id={arr2}
            />
            <label
                for={arr2}
            >
                {arr2}
            </label>
        </li>
    )}
    </div>
)
};

ReactDOM.render(<Test />, document.getElementById('app'));
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="app"> </div>

推荐阅读