为什么没有出现控制台

Question

我的问题与反应钩子有关。我正在为汽车品牌和型号做 api 项目。作为我从选择元素中选择的第一步，这将是安装第二个选择与我的第一个选定元素相关的内容。但我有一个问题。当我选择第一步时，没有出现控制台，但是当我第二次选择控制台时，我的第一个选择

function Home() {
const [api, setApi] = useState({});
const [userId, setUserId] = useState({});
const [errors, setErrors] = useState(true);
const [error, setError] = useState(false);
const id = useDispatch((userId)=>modelAction(userId));

let key;
let history = useHistory();
function handleClick(e){
key = api.filter(item => item.var_title === e.target.value);

setUserId({...key});
console.log(userId);
id({
type: 'MODELS',
id: userId
})
history.push('/model')
}
useEffect(()=>{
axios.get('https://api.carecusoft.com/tr/v1/chiptuning?key=testSA65D46ASD4AS8F4AS6F4A68')
.then(res=> setApi(res.data))
.catch(err => setErrors(true));
console.log(api);
},[userId]);

return (
<div>
<select onChange={e=>handleClick(e)} as={Link} to='/model'>
<option>Marka seç</option>
{
Object.values(api).map(item => {
const {id, var_title} = item;
return(
<option key={id} value={var_title} >{var_title}</option>
)
})
}
</select> 

</div>
);
}
export default Home;

Answer 1

您的控制台日志不需要在 useEffect 中。 因为它不是副作用。

将控制台日志放在退货上方

Answer 2

因为您将数据记录在userid设置handleClick函数中。您需要将数据记录在useEffect中才能看到更改。

如果您在渲染中使用钩子在渲染中设置变量 变量中的功能组件更改将显示为其新值 inuseEffect，因为您将变量作为参数提供给useEffect。

就像这个例子;

useEffect(()=>{
console.log('userId', userId);
},[userId]);

表示，仅在用户 ID更改时触发使用效果。

试试这个，你可以清楚地明白我的意思，

useEffect(()=>{
axios.get('https://api.carecusoft.com/tr/v1/chiptuning?key=testSA65D46ASD4AS8F4AS6F4A68').then(res=> setApi(res.data))
.catch(err => setErrors(true));
console.log('api', api);
console.log('userId', userId);
id({
type: 'MODELS',
id: userId
})
},[userId]);

希望对您有所帮助。