state 的值始终是默认值。反应 js 16.12.0答案

【问题标题】：value of state is always default. React js 16.12.0state 的值始终是默认值。反应 js 16.12.0
【发布时间】：2020-05-19 10:19:30
【问题描述】：

我有两个 useEffect-s。一个用于从 api 获取数据并将其保存在 state 中，第二个仅调用一次并开始监听 websocket 事件。在 websocket 事件处理程序中，我记录了获取的数据，但它始终具有默认值。即使获取数据成功完成并在 UI 上绘制列表，列表的值始终为空 - []。

const [list, setList] = useState([]);

useEffect(() => {
   axios.get("https://sample.api.com/get/list")
       .then(res => {
           setList(res.data);
       });
}, [window.location.pathname.split('/')[2]]);

useEffect(() => {
   webSocket.on('messageRecieved', (message) => {
        console.log(list);
    }); 
}, []);

【问题讨论】：

是的，事件里面的console.log会一直显示初始值，当你收到一个事件你想做什么？如果您只想记录列表以查看它是否已从 fetch 更新，请在组件主体内放置 console.log 或检查反应开发工具
问题是初始值，在 setList() 调用之后，我想用列表变量而不是初始值来检索新分配的值。但是 Draeken 的答案看起来很有希望，我明天会检查它

标签： reactjs setstate use-effect

【解决方案1】：

尝试改变

.then(res => {

到

.then((res) => {

如果您将控制台日志添加到每个钩子中，或者说是否在其中预设了值，请说明：

useEffect(() => {
   axios.get("https://sample.api.com/get/list")
       .then((res) => {
           console.log(res.data)
           setList(res.data);
       });
}, [window.location.pathname.split('/')[2]]);

useEffect(() => {
   webSocket.on('messageRecieved', (message) => {
        console.log(list);
        console.log(message);
    }); 
}, []);

你也可以添加错误捕获，以防万一：

.catch((error) => {
    console.log(error.response)
})

【讨论】：

对不起，如果我不具体。即使在一分钟后触发'messageRecieved'，列表仍然是默认的。当然 setList(res.data);被调用并且非空列表被传递给它。
在论点周围加上括号有何改变？我没有意识到这只是化妆品。
感谢您的贡献，但 Draeken 的回答是我的问题的解决方案。

【解决方案2】：

您的第二个效果是由于关闭而引用了初始列表值（一个空数组）。这就是为什么 useEffect 应该在其第二个参数中引用其所有依赖项的原因。

但在这种情况下，如果您不想在每次更新列表时订阅 webSocket 事件，您可以在列表上使用 React 的 refs。

const listValue = useRef([]);
const [list, setList] = useState(listValue.current);

设置值时：

res => {
    listValue.current = res.data
    setList(listValue.current);
}

并且在一次触发 useEffect 检索列表时：

useEffect(() => {
    webSocket.on('messageRecieved', (message) => {
       console.log(listValue.current);
    }); 
}, []);

【讨论】：

这就是我一直在寻找的完美而准确的解决方案！非常感谢！