無法將值添加到數組 state React

Question

我最近發布了一個關於通過 websocket 發送和接收數據的問題。 為了不重復大部分工作，原始問題在這里找到： Socket.io emitting undefined variable React

從那以后，我稍微修改了我的應用程序，以便從服務器接收到的每個 id 都被添加或刪除到disabled的數組中（如果從服務器接收到的focus參數為 true，則添加 id，如果不是，則將其刪除）。 這樣我就可以根據發送的焦點禁用/啟用問題。

我所做的細微調整是三倍的，都在App.js文件中

1. 將disabled數組添加到 state

const [disabled, setDisabled] = useState([])

2.在問題中包含disabled參數

<TextArea
    cols={50}
    helperText="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"
    id="text2"
    invalidText="Invalid error message."
    labelText="Text area label"
    placeholder="Placeholder text"
    rows={4}
    onFocus={() => setFocusTrue('text2')}
    onBlur={() => setFocusFalse('text2')}
    disabled={disabled.indexOf('text2')!==-1}
/>

您將在上面注意到，如果 questionId 包含在disabled數組中（因此禁用問題），則disabled參數將設置為 true，否則將設置為 false

3. 添加 questionId 到disabled的 state 數組

useEffect(() => {
    socket.on("message", ({ user, id, focus }) => {
        console.log(user, "clicked on", id, "with focus", focus)
        console.log('adding', id, 'to disabled')
        setDisabled(prevDisabled => [...prevDisabled, id]);
        console.log("disabled:", disabled)
    })
}, [])

現在，我只是將來自服務器的所有 questionId 添加到disabled的數組中，這樣我就可以測試它們是否確實被添加了。 但這是我的問題，因為disabled的數組總是空的（見下面的截圖）。 在設置新的disabled state 之前，可以在控制台日志 output 中看到id變量存在，但它沒有按預期添加。

編輯：根據評論，如果我在渲染之前console.log(disabled) ，我可以看到disabled的數組實際上正在更新。 但是，如果我對數組應用任何類型的邏輯，就會出現錯誤。 下面是修改后的useEffect ，其中包含一些邏輯（本質上是向數組添加或刪除 id）

useEffect(() => {
    socket.on("message", ({ user, id, focus }) => {
      console.log(user, "clicked on", id, "with focus", focus)
      console.log('adding', id, 'to disabled')
      if (focus) {
        console.log('not my user and focus is true')
        setDisabled(prevDisabled => [...prevDisabled, id])
        console.log("disabled after adding", disabled)
      } else {
        let filteredArray = disabled.filter(idToRemove => idToRemove !== id)
        setDisabled({disabled: filteredArray});
      }
      console.log("disabled:", disabled)
    })
  }, [])

當我單擊文本框時，問題的id會按預期添加到disabled的數組中，但是當我單擊它時，出現以下錯誤：

disabled.indexOf 不是 function

這指的是disabled={disabled.indexOf('text1')!==-1}

Answer 1

我認為您的代碼很好，如果您嘗試在設置后立即控制台記錄最重新發送的 state，為什么它不起作用？ setState 是異步的，它可能無法像您預期的那樣實時工作。

您真正想要嘗試的是添加一個 useEffect 並監聽已disabled state 的更改

useEffect(() => {
    console.log("disabled", disabled);
}, [disabled]); // since disabled is in the dependency array this hook function will call, every time when the disabled gets updated.
// so you are so sure the disabled is getting updated correctly

或者只是在渲染之前做一個簡單的console.log(disabled)並查看。

正如我所見，您修改后的useEffect版本不正確，應將其更正為

....
const filteredArray = disabled.filter(idToRemove => idToRemove !== id)
setDisabled(filteredArray);
....