javascript - 无法将值添加到数组状态 React

Question

我最近发布了一个关于通过 websocket 发送和接收数据的问题。为了不重复大部分工作，原始问题在这里找到：Socket.io emitting undefined variable React

我已经稍微修改了我的应用程序，以便从服务器接收到的每个 id 都被添加或删除到一个disabled数组中（如果focus从服务器接收到的参数为 true，则添加 id，如果不是，则删除它）。这样我就可以根据发送的焦点禁用/启用问题。

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

1. 将disabled数组添加到状态

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参数将设置为 true，否则为falsedisabled

3.将questionId添加到disabled状态数组

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数组总是空的（见下面的截图）。id从设置新状态之前的控制台日志输出中可以看出，该变量存在disabled，但未按预期添加。

编辑：根据评论，如果我在渲染之前 ，我可以看到disabled数组实际上正在更新。console.log(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 不是函数

这指disabled={disabled.indexOf('text1')!==-1}

标签： javascriptarraysreactjsreact-nativewebsocket

Answer 1

我认为您的代码很好，如果您在设置后立即尝试 console.log 最重新发送的状态，为什么它不起作用？setState 是异步的，它可能无法像您预期的那样实时工作。

你真正想要尝试的是添加一个 useEffect 并监听disabled状态的变化

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);
....