React useState 不断给我 undefined

Question

const [urlList, setUrlList] = useState();

onClick={function(){
                                setUrlList(item.num);
                                console.log(item.num);
                          
                                callDayList();
                            }}

1. 这段代码是关于什么的？

有一个表格，如果我点击一个 url，它会给出 item.num(1,2,3...)。并通过 callDayList 函数，将号码转到后端（node.js）。

1. 有什么问题？

问题是状态urlList，没有正确的数字，只有未定义。 console.log 的结果只是未定义的。但是，在 chrome 上，我发现状态正在正确更改，但是更改速度有点慢，并且状态值向我显示了最后一次单击的状态（不确定您是否理解，在第二次单击时，状态值是第一个点击的状态。）。

3.我试过什么？

我搜索了互联网，我认为这是渲染的问题。因为 useState 不会立即应用更改。我认为这就是一直显示未定义的原因，因为在第一次点击时，状态中没有值（第二次点击时，它显示第一次点击的状态值。）

其中一个解决方案是类似 ...item.num (add"...") 的代码，但是没有用。 第二个是将状态放入 var 中，例如 var _num = urlList 和 console.log(_num)，但也没有用。

其实我已经通过不使用 state 解决了这个问题，而是将 item.num 放在一个 var 中并发送到后端，但是我想了解为什么它不能通过 useState 工作。

Answer 1

setUrlList(item.num); 这是异步的。您需要使用useEffect 挂钩来执行urlList 更改时应该发生的任何事情。 试试下面：

import {useEffect} from 'react';

const [urlList, setUrlList] = useState();

const callDayList = () => { 
     console.log(urlList); 
     Axios.post('localhost:3001/api/get',{ passNum : urlList, });
}

useEffect(() => {callDayList();}, [urlList]);

在你的元素中，

onClick={function(){ setUrlList(item.num);}}

Answer 2

您需要注意状态的变化。查看您的代码示例（模拟数据）https://codesandbox.io/s/proud-cherry-1c8b6

useEffect 正在关注urlList 的状态变化

正如您还可以看到useEffect 之外的第一个控制台，正在提供undefined。

export default function App() {
  const [urlList, setUrlList] = useState();
  const items = [1, 2, 3]
  console.log(urlList);

  useEffect(() => {
    console.log(urlList);
  }, [urlList])
  return (
    <div className="App">
      {items.map(item => {
        return (
          <p onClick={function(){
            setUrlList(item);
            console.log(item);
        }}>Item {item}</p>
        )
      })}
    </div>
  );
}