数组对象在我们硬编码数据时工作，但在我们从 Node js 填充数据以响应 js 时不工作

Question

我在 React Js 中有数组对象，当我在 React js 中硬编码数据并执行它时，它正在工作，从 Node JS 发送的相同数据在 React JS 中不显示。

请查看 codesandbox link，我的代码有效 https://codesandbox.io/s/reactbootstrapcarousel-forked-4selu?file=/src/index.js。

import React,{useState} from "react";
import ReactDOM from "react-dom";
import { Carousel } from "react-bootstrap";

import "bootstrap/dist/css/bootstrap.css";
import "./styles.css";

function App() {
  const [eventList, setEventList] = useState([{
                                    eventName: 'Sankranti',
                                    eventDate: '2021-01-21T00:00:00.000Z',
                                    merchantid: 'tp012345'
                                  },
                                  {
                                    eventName: 'Sankranti 1',
                                    eventDate: '2021-01-26T00:00:00.000Z',
                                    merchantid: 'tp012345'
                                  }])
  const eventListRender = eventList.length > 0 ?
                          eventList.map((item,index) => { 
                          return <Carousel.Item>{item.eventName}</Carousel.Item>
                          }) :
                          <Carousel.Item>No upcoming events</Carousel.Item>
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Carousel>
          {eventListRender}
      </Carousel>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

当我通过 axios 将数据从 Node JS 传递到 React JS 时，相同的代码不起作用，但数据是从 Node JS 传递到 React JS。它显示为未定义（项目事件名称：未定义。）

请找到我的代码。

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import Carousel from 'react-bootstrap/Carousel'
import axios from 'axios';
import DashboardNavBar from './DashboardNavBar';
import Header from './Header';

const DashboardPage = (props) => {
    const [eventList, setEventList] = useState([])
    const [index, setIndex] = useState()

    if (!props.profileData) {
        useEffect(() => {
            (async () => {
                const eventsList = await axios.get(
                    "http://localhost:3000/api/dashboard"
                );
                    console.log(eventsList.data)
                    const response = eventsList.data
                    setEventList(eventList => [...eventList, response])
                    if(!response){
                        setErrorMsg('Please create Event and then add User !!')
                    }
            })();
        }, []);
    }

    const eventListRender = eventList.length > 0 ?
                          eventList.map((item,index) => { 
                              console.log('item event name: ', item.eventName)
                          return <Carousel.Item>{item.eventName}</Carousel.Item>
                          }) :
                          <Carousel.Item>No upcoming events</Carousel.Item>

    return (
        <div>
            <DashboardNavBar />
            <Header />
            <p >Welcome !!!!!!</p>
            <Carousel>
                {eventListRender}
            </Carousel>
        </div>
    );
}

const mapStateToProps = (state) => ({
    profileData: state.auth.profileData
})

export default connect(mapStateToProps) (DashboardPage);

请查找上述代码的控制台结果。

Answer 1

不要有条件地使用钩子。 https://reactjs.org/docs/hooks-rules.html

XXXX if (!props.profileData) { XXXX
        useEffect(() => {
            (async () => {
                const eventsList = await axios.get(
                    "http://localhost:3000/api/dashboard"
                );
                    console.log(eventsList.data)
                    const response = eventsList.data
                    setEventList(eventList => [...eventList, ...response])
                    if(!response){
                        setErrorMsg('Please create Event and then add User !!')
                    }
            })();
        }, []);
    }

改为使用下面

            useEffect(() => {
             if(!props.profileData) {
                (async () => {
                    const eventsList = await axios.get(
                        "http://localhost:3000/api/dashboard"
                    );
                        console.log(eventsList.data)
                        const response = eventsList.data
                        setEventList(eventList => [...eventList, ...response])
                        if(!response){
                            setErrorMsg('Please create Event and then add User !!')
                        }
                })();
            }
            }, [props.profileData]);
        }

看起来问题出在 .map 逻辑上。

 const eventListRender = eventList.length > 0 ?
                          eventList.map((item) => { 
                              console.log('item: ', item)
                              console.log('item event name: ', item.eventName)
                          return <Carousel.Item>{item.eventName}</Carousel.Item>
                          }) :
                          <Carousel.Item>No upcoming events</Carousel.Item>

Answer 2

您还需要传播您的 API 结果，因为它是一个数组：

setEventList(eventList => [...eventList, ...response])

数组对象在我们硬编码数据时工作，但在我们从 Node js 填充数据以响应 js 时不工作

array object working if we hardcode data but not working when we populate data from Node js to react js

reactjs

react-bootstrap

react-hooks