时间戳

首页 > 解决方案 > 无法通过redux映射动态创建的数组

javascript - 无法通过redux映射动态创建的数组

问题描述

import "./admin.css";
import { HeaderAdmin } from "./header/header";
import Clients from "./clients/clients";
import { clientsRef } from "../../firebase/firebase";
import { useEffect } from "react";
import { connect } from "react-redux";
import { fetchClients } from "../../redux/clients-admin/clients-admin.actions";

const Admin = ({ fetchClients }) => {
  // const testList = [{ clientEmail: "john@unknown.com", clientName: "john" }];

  // console.log(testList);

  const clientData = () => {
    const clientsList = [];
    clientsRef.get().then((querySnapshot) => {
      querySnapshot.docs.forEach((doc) => {
        const document = doc.data();
        console.log(document);
        clientsList.push(document);
      });
    });
    console.log(clientsList);
    const clientArray = { clients: clientsList };
    fetchClients(clientArray);
  };
  useEffect(clientData, []);

  return (
    <div>
      <HeaderAdmin />
      <Clients />
    </div>
  );
};
const mapDispatchToProps = (dispatch) => ({
  fetchClients: (clientList) => dispatch(fetchClients(clientList))
});
export default connect(null, mapDispatchToProps)(Admin);

在此处输入图像描述[![在此处输入图片描述][2]][2]我正在使用redux创建一个数组。但它不适用于地图功能。但是如果我 console.log 创建了数组并从控制台复制它，然后将该复制的数组分配给另一个常量，它就可以工作。为什么它不能动态工作。我正在添加我的控制台的图片，第一个是静态数组（我复制并粘贴到我的代码中的那个）。第二个是动态创建的数组。有什么区别，如果我将它们复制并粘贴到记事本，它们看起来完全一样，但是 [![

import "./clients.css";
import { ClientBar } from "./client-bar";
import { connect } from "react-redux";

const Clients = ({ fetchClients }) => {
  const cs = [
    {
      clientEmail: "john@unknown.com",
      clientMessage:
        "hello my name is john wickhello my name is john wickhello my name is john wickhello my name is john wick",
      clientSubject: "unknown",
      clientName: "john"
    },
    {
      clientEmail: "client@gmail.com",
      clientMessage:
        "Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis dolorum dolorem soluta quidem expedita aperiam aliquid at. Totam magni ipsum suscipit amet? ",
      clientSubject: "client",
      clientName: "client"
    }
    ///I copied this cs from output of my clintsss array
  ];
  console.log(cs);
  const clintsss = fetchClients.clients;
  console.log(clintsss);
  return (
    <div className="about">
      <div className="box">
        <div className="box-1">
          <h1>Clients</h1>
          <div className="clients-box">
             {clintsss.map((data) => (
              <div>{data.clientName}</div>
            ))} 
          </div>
        </div>
      </div>
    </div>
  );
};

const mapStateToProps = (state) => ({
  fetchClients: state.fetchClients.clientsList
});

export default connect(mapStateToProps)(Clients);

] 3 ] 3动态生成的Array 在map 函数中不起作用。

标签： javascriptarraysreactjsreduxmap-function

解决方案

恭喜！你弄清楚到底出了什么问题！但我建议您不要将setTimeout其用作等待获取数据的方法。为什么？异步操作可能需要不同的时间，具体取决于多种因素，例如：如果用户的 Internet 连接速度较慢并且获取数据的时间比您超时的时间长，会发生什么情况？或者，如果用户有一个快速的互联网连接并且获取数据的速度比你的超时时间更快，那么你会让他们等待更长时间。

这是一篇关于使用钩子获取数据的好文章，我建议您阅读它！简而言之，您需要执行以下操作（这只是一个示例，您需要调整代码）：

const [clients, setClients] = useState([]);

useEffect(() => {
    async function fetchData() {
      const clients = await functionToFetchClients();
      setClients(result.clientsList);
    }

    fetchData();
  }, []);

推荐阅读