Javascript 调用第一个函数并获取数据后调用第二个函数，react+redux

在pure React中，从服务器获取数据后，我调用GetTodos函数中的clickActive函数

  getTodos = () => {
    const url = 'https://jsonplaceholder.typicode.com/todos';

    const params = {
      expand: 'createdBy, updatedBy'
    };

    axios({
      method: 'GET',
      url,
      params
    })
      .then(res => {
        this.setState({
          todos: res.data
        }, () => this.clickActive());
      })
      .catch(error => {
        console.log(error);
      });
  };


clickActive = () => {
  const activeTask = document.querySelector('.activeTask');

  activeTask.click();
  console.log('active')
};

如何在React+Redux中调用函数clickActive？我在Actions文件夹中创建getTodos操作。在Todos组件中，它通过单击GET按钮调用这个函数gettoos。获取数据后如何调用clickActive函数？我将clickActive功能放在Helpers文件中。我应该将clickActive函数导入文件actions/index.js吗

预期效果：单击按钮获取->调用函数获取->调用函数单击激活

此处演示：

行动

待办事项

clickActive函数是一个将与创建的DOM交互的函数，因此，如果要使用钩子，则应在componentDidUpdate和componentDidMount或useEffect钩子中渲染后调用它

在componentDidMount/componentDidUpdate场景中，我建议在Todos组件中添加以下生命周期方法：

组件安装{ //挂载后调用clickActive一次，但这次您的TODO可能为空 单击活动； } componentDidUpdateprevProps{ 如果prevProps.todos！==this.props.todos{ //每次更改TODO时调用clickActive //也就是说，当异步请求更改redux状态时，将调用它 单击活动； } }

---

您可以在操作中导入clickActive功能。但不能保证它在分派后重新呈现组件后运行，因为它是异步的。顺便问一下，你想在clickActive功能中实现什么？。是否尝试将API结果数组中的特定元素/第一个元素设置为活动元素？如果是这种情况，那么应该有其他方法来实现这一点，而无需clickActivefunction@nithin示例：在数据库中搜索某些内容。我看到一个元素。此clickActive强制单击此元素并显示其数据。除了列表有其url和特定元素有其url之外。我强制单击一个项目，该项目的数据正在加载。

import axios from 'axios';

export const GET_TODOS = 'GET_TODOS';
export const FETCH_SUCCESS = 'FETCH_SUCCESS';
export const FETCH_FAILURE = 'FETCH_FAILURE';

export const getTodos = () => 
dispatch => {

  return axios({
      url: 'https://jsonplaceholder.typicode.com/todos',
      method: 'GET',
    })
    .then(({data})=> {
      console.log(data);

      dispatch({type: GET_TODOS, payload:{
        data 
      }});   
    })
    .catch(error => {
      console.log(error);

      dispatch({type: FETCH_FAILURE})
    });
};

export const getTodo = () => 
dispatch => {

  return axios({
      url: 'https://jsonplaceholder.typicode.com/todos',
      method: 'GET',
    })
    .then(({data})=> {
      console.log(data);

      dispatch({type: GET_TODOS, payload:{
        data 
      }});   
    })
    .catch(error => {
      console.log(error);

      dispatch({type: FETCH_FAILURE})
    });
};

import React, { Component } from 'react';
import { connect } from 'react-redux';
import {getTodos} from '../.././actions';
import { clickActive } from '../../helpers';

class Todos extends Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <>
        <button onClick={this.props.getTodos}>GET</button>
        <ul>
          {this.props.todos.map(todo => {
          return <li key={todo.id}>
                    {todo.title}
                </li>
          })}
        </ul>
        <div className="active">Active</div>
      </>
    );
  }
}

const mapStateToProps = state => {
  const { todos } = state;

  return {
    todos
  };
};

const mapDispatchToProps = dispatch => ({
  getTodos: () => dispatch(getTodos())
});

export default connect(mapStateToProps, mapDispatchToProps)(Todos);

export const clickActive = () => {
  const activeTask = document.querySelector('.active');

  activeTask.click();

  console.log('click div');
};