立即更新 useState

Question

useState不会立即更新状态。

\n

我正在使用react-select，我需要加载multi根据请求结果选择的 ( ) 选项的组件。

\n

因此，我创建了 statedefaultOptions来存储常量的值queues。

\n

事实证明，加载组件时，值 \xe2\x80\x8b\xe2\x80\x8bar 仅在第二次显示。

\n

我console.log在 中做了一个queues，返回与空不同。

\n

我对状态做了同样的事情defaultOptions，返回的是空的。

\n

我创建了一个codesandbox以便更好地查看。

\n

const options = [\n  {\n    label: "Queue 1",\n    value: 1\n  },\n  {\n    label: "Queue 2",\n    value: 2\n  },\n  {\n    label: "Queue 3",\n    value: 3\n  },\n  {\n    label: "Queue 4",\n    value: 4\n  },\n  {\n    label: "Queue 5",\n    value: 5\n  }\n];\n\nconst CustomSelect = (props) => <Select className="custom-select" {...props} />;\n\nconst baseUrl =\n  "https://my-json-server.typicode.com/wagnerfillio/api-json/posts";\n\nconst App = () => {\n  const userId = 1;\n  const initialValues = {\n    name: ""\n  };\n  const [user, setUser] = useState(initialValues);\n  const [defaultOptions, setDefaultOptions] = useState([]);\n  const [selectedQueue, setSelectedQueue] = useState([]);\n\n  useEffect(() => {\n    (async () => {\n      if (!userId) return;\n      try {\n        const { data } = await axios.get(`${baseUrl}/${userId}`);\n        setUser((prevState) => {\n          return { ...prevState, ...data };\n        });\n\n        const queues = data.queues.map((q) => ({\n          value: q.id,\n          label: q.name\n        }));\n\n        // Here there is a different result than emptiness\n        console.log(queues);\n        setDefaultOptions(queues);\n      } catch (err) {\n        console.log(err);\n      }\n    })();\n\n    return () => {\n      setUser(initialValues);\n    };\n  }, []);\n\n  // Here is an empty result\n  console.log(defaultOptions);\n\n  const handleChange = async (e) => {\n    const value = e.map((x) => x.value);\n    console.log(value);\n    setSelectedQueue(value);\n  };\n\n  return (\n    <div className="App">\n      Multiselect:\n      <CustomSelect\n        options={options}\n        defaultValue={defaultOptions}\n        onChange={handleChange}\n        isMulti\n      />\n    </div>\n  );\n};\nexport default App;\n

\n

Answer 1

当你调用 setState 时，React 不会立即更新状态，有时可能需要一段时间。如果您想在设置新状态后执行某些操作，可以使用 useEffect 来确定状态是否更改，如下所示：

    const [ queues, setQueues ] = useState([])

    useEffect(()=>{
        /* it will be called when queues did update */
    },[queues] )

    const someHandler = ( newValue ) => setState(newValue)