相关疑难解决方法(0)

什么的等价物 componentDidMount,componentDidUpdate以及componentWillUnmount使用钩做出反应就像生命周期挂钩useEffect？

我是 Hooks 的新手，并且遇到了一些让我追尾的案例。

希望有人可以解释或提供对我有意义的解决方案：

1. 在安装组件时只加载一次方法是令人困惑的。我试过这个方法，它有效，但不明白。谁可以给我解释一下这个：

   const useMountEffect = fun => useEffect(fun, [])
   
   useMountEffect(() => {
     if (!isEdit) handleAddRow()
   })
   
   const handleAddRow = () => {
     let appendArr = [...listArr, '']
     setListArr(appendArr)
   }
   

   Run Code Online (Sandbox Code Playgroud)

关注此线程： 如何使用 React useEffect 仅调用一次加载函数

我尝试只使用没有依赖关系的 useEffect 并且 eslint 不喜欢那样，他们建议添加一个似乎有点 hacky 的跳过下一行：

// eslint-disable-next-line

我有一个想法，这可能是因为我正在做一些样式设计来更改单选按钮，但是我不确定。我正在设置一个onClick事件，该事件两次调用了我的函数。我已删除它以确保它没有在其他地方被触发，并且onClick似乎是罪魁祸首。

<div
  className="CheckboxContainer"
  onClick={() =>
    this.changeShipping({ [k]: i })
  }
>
  <label>
    <div className="ShippingName">
      {shipOption.carrier
        ? shipOption.carrier.serviceType
        : null}{' '}
      {shipOption.name}
    </div>
    <div className="ShippingPrice">
      ${shipOption.amount}
    </div>
    <input
      type="radio"
      value={i}
      className="ShippingInput"
      onChange={() =>
        this.setState({
          shippingOption: {
            ...this.state.shippingOption,
            [k]: i
          }
        })
      }
      checked={
        this.state.shippingOption[k] === i
          ? true
          : false
      }
    />
    <span className="Checkbox" />
  </label>
</div>

我的功能目前仅是运输选项的简单控制台日志：

changeShipping(shipOption){
 console.log('clicked') // happening twice 
}

如果没有任何理由可以在这里看到为什么会发生这种情况，我可以发布其余代码，但是有很多方面，我认为这与之无关，但是我认为这是一个很好的起点。

完整代码：

import React, { Component } from 'react'
import fetch from 'isomorphic-fetch'
import { Subscribe } …

在基于类的组件中：

componentDidMount() {
    axios.get('https://jsonplaceholder.typicode.com/posts').then((res) => {
        this.setState({
            posts: res.data.slice(0, 10)
        });
        console.log(posts);
    })
}

我尝试了这个：

const [posts, setPosts] = useState([]);

useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts').then((res) => {
        setPosts(res.data.slice(0, 10));
        console.log(posts);
    })
});

它创建了一个无限循环。如果我将[] / {}作为第二个参数[1] [2]传递，则它将阻止进一步的调用。但这也阻止了数组的更新。

[1]使用中的无限循环

[2] 如何仅使用一次React使用useEffect调用加载函数

我刚开始反应，我有以下问题：useEffect 正在无限次更新，但我只想在我插入新记录时更新数据，如果有人能纠正我，我将不胜感激。

这是我的代码：

索引.js

import {createUser, getUsers} from '../actions';

const Home = () => {
    const [data, setData] = useState([]);

useEffect(() => {
    async function fetchData(){
        const result = await getUsers();
        setData(result);
        console.log("teste: ", result);
    }
    fetchData();
}, [setData]);

const handleCreateUser = (user) => {
    createUser(user).then((users) => {
    });
};

如果我使用第二个参数 useEffect(() => {}, [setData])，它会打破无限循环，但当我插入新寄存器时表不会更新，我需要使用 F5。

我究竟做错了什么？创建用户工作正常，我只想在同一时间添加表

我在 useEffect 挂钩中调用 get API，以在组件安装之前获取数据，但它多次调用 API，并且收到错误“To many API requests”。

const [total, setTotal] = useState(0);
const [message, setMessage] = useState('');

useEffect(() => {
    covidApi.getData({url:'/totals'})
    .then((response) => {
        setTotal(response.data[0]);
        setMessage('');
        console.log(response.data);
    })
    .catch((error) => {
        setMessage("No data found");
        console.log(error);
    })
});

输出：

请让我知道这是在使用 useEffect 钩子渲染组件之前从 API 获取数据的最佳方式。