Question

我的问题与react挂钩有关。我正在为汽车品牌和型号进行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

因为您将数据记录在您设置用户ID 的handleClick函数中。您需要在useEffect中记录数据以查看更改。

如果您在 Render 中设置带有钩子的变量，变量中功能组件的更改与新值一起出现在 useEffect 中使用，因为您将变量作为 useEffect 的参数。

像这个例子一样

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

表示， useEffect 仅在用户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]);

希望有帮助。

为什么没有出现控制台

2 个答案: