反应更新 useState 数组不会导致元素刷新

Question

当更改 viaList state 时，我无法触发组件更新。 如果有人可以提供帮助，请 <3

如果可能的话，我不想 append 这些孩子。

import React, { useEffect, useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

function BookingForm() {
  const [viaList, setViaList] = useState([]);

  function addViaLocation() {
    const arr = viaList;

    arr.push(
    <li key={uuidv4()}>
      <label className="form-label">
        Via Location
      </label>
    </li>)

    setViaList(arr);
  }

  return (
    <>
      <button onClick={addViaLocation} className="button-standard primary" type="button">
        Add Additional Location
      </button>
      <ul>{viaList.length > 0 && viaList.map(item => item)}</ul>
    </>
  );
}

export default BookingForm;

• 将功能分离到一个单独的组件中
• 使用道具触发更新
• 常规 DOM 内容（附加不适合我们的用例）

Answer 1

你需要创建一个新数组，让 React 知道它已经改变了。 如果你只推送到旧的 viaList 它仍然会保持viaList === previousViaList 。 而是创建一个新数组，例如使用扩展运算符：

  function addViaLocation() {
    const newElement = (
    <li key={uuidv4()}>
      <label className="form-label">
        Via Location
      </label>
    </li>)

    setViaList([...viaList, newElement]);
  }

Answer 2

组件仅在 hook 的 prev 值与新值不同时才呈现，这里不是这种情况

const arr = viaList;

尝试更新arr就像尝试更新viaList一样，这是不可能的，因此您为setViaList提供了相同的值，因此component不会呈现。

但是当你创建一个副本时，你可以更新它：

const arr = [...viaList];

Answer 3

修复...

我正在做以下事情（只是更长）：

setViaList([...viaList, <li>STUFF</li>])

我不得不使用回调来更新 state 数组：

setViaList(viaList => [...viaList, <li>STUFF</li>])

Answer 4

 import React, { useEffect, useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; function BookingForm() { const [viaList, setViaList] = useState([]); function addViaLocation() { const arr = [...viaList]; arr.push( <li key={uuidv4()}> <label className="form-label"> Via Location </label> </li>) setViaList(arr); } return ( <> <button onClick={addViaLocation} className="button-standard primary" type="button"> Add Additional Location </button> <ul>{viaList.length > 0 && viaList.map(item => item)}</ul> </> ); } export default BookingForm;

您可以通过传播当前 state 数组然后推送新数据并使用浅副本更新 state 来创建数组的浅副本