在 <Link> 中单击两次以更新状态答案

【问题标题】：Click onClick twice in <Link> to update state在 <Link> 中单击两次以更新状态
【发布时间】：2020-09-29 13:36:04
【问题描述】：

我正在尝试通过在我的<Link> 中触发 onClick 事件来更新我的状态，但只有在我单击它两次之后，输出才会出现在我的控制台中，我尝试在 stackoverflow 中阅读与此类似的其他问题，但仍然找不到解决方案，谁能告诉我我做了什么？你的帮助会很棒

import React,{useState} from 'react';
import { BrowserRouter as Router, Link } from 'react-router-dom';

const [search, setSearch] = useState("");
const [keyword, setKeyword] = useState("");

const handleChange = (e) =>{
    setSearch(e.target.value);
    console.log(search);
};

const handleClick = () => {
    setKeyword(search);
    setSearch('');
    console.log(keyword);
};

return(
    <div>
        <input onChange={handleChange} value={search} placeholder="Search songs, artist, albums"/>

        <Link onClick = {handleClick} to={`/songlist/${keyword}`}>Search</Link>
    </div> 
)

【问题讨论】：

这能回答你的问题吗？ Why calling react setState method doesn't mutate the state immediately?
所以我需要在 setState 中传递一个回调函数才能让它立即工作？
它给了我这个错误 ** 警告：来自 useState() 和 useReducer() Hooks 的状态更新不支持第二个回调参数。要在渲染后执行副作用，请在组件主体中使用 useEffect()** 声明它。
没错，你需要使用React.useEffect(() => { console.log(search); }, [search]);（我也建议不要使用钩子作为react初学者）
因为 JS 是异步的。你可以使用useEffect钩子来处理效果。

标签： javascript reactjs

【解决方案1】：

你需要明白的是：当你点击时，你添加了一个事件，它的事件是链接在你的组件和你的道具上的。

所以你需要 preventDefault 来告诉你的事件/道具/组件正常运行。保留您的实际代码，但在每个事件的开头添加 e.preventDefault() :)

例子：

const handleChange = (e) =>{
    e.preventDefault();
    setSearch(e.target.value);
    console.log(search);
};

【讨论】：

【解决方案2】：

你能不能试试这个，换一下

<Link onClick = {handleClick} to={`/songlist/${keyword}`}>Search</Link>

到

<Link to={`/songlist/${search}`}>Search</Link>

【讨论】：

【解决方案3】：

JS 是异步的，所以你需要使用useEffect hook 来处理效果。

例如：

const [search, setSearch] = useState(null);
const [keyword, setKeyword] = useState(null);

const handleClick = () => {
  setKeyword(search);
  //setSearch('');
  //console.log(keyword);
};

React.useEffect(()=>{
  if (keyword) {
    console.log(keyword);
    setSearch(null);
  }
},[keyword]);

【讨论】：