拼接和setState()之后的函数渲染

时间:2019-05-08 10:49:41

标签: javascript reactjs render splice

我希望在拼接数组后重新渲染React函数。

这是函数的一部分(使用Hooks):

function showProblem() {
  const [andArray, setAndArray] = useState([]);

const deleteTag = (i, arr) => {
    let and = andArray;
    switch (arr) {
      case "and":
        and.splice(i, 1);
        setAndArray(and);
        break;
      default:
        return null;
    }
  };


return(
<div>
    {andArray.map((and, i) => {
            return (
              <span
                onClick={() => deleteTag(i, "and")}
                key={i}
              >
                {and}
              </span>
            );
     })}
</div>
)
}

当我单击SPAN元素时,我希望我的“ andArray.map”再次呈现。

接合处正常工作,我的数组没问题……但是该函数未重新呈现。

非常感谢。

1 个答案:

答案 0 :(得分:3)

.splice对数组进行突变。反应状态必须是不变的。不可变的方式是:

  setAndState(and.filter((_, i2) => i2 !== i));