问题[reactjs]

大家好，

此代码仅加载一个文件的名称，您能否通过示例解释如何加载文件数组。 IE。第一次单击 - 加载第一个文件的名称，第二次单击 - 在第一个文件的名称旁边出现第二个文件的名称，等等。

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.PureComponent {
  constructor(props) {
    super(props);
    const arr = [this.state = {
      fileName: '',
    }];
    // this.state = {
    //   fileName: '',
    // };
  }
    render() {
      return <>
        <div>
          {/* {arr.map(o => */}
            <span>{this.state.fileName}</span>
          {/* )} */}
          <input type="file" onChange={(e) => {
            e.preventDefault();
            this.setState({ fileName: e.target.files[0].name });
          }} />
        </div>
      </>;
    }
  }

export default MyComponent;

小项目.Net Core Web API+++ 。React JS​Typescriptantd

后端已准备就绪并正确返回数据（我在 Swagger 上运行它）。

数据完整到达前端。

该表仅显示 7 列中的 3 列。

代码

"use client"

import { Table } from "antd"; 
import { getAllOrders } from "@/app/Services/service";   
import { Order } from "@/app/Models/Order";    
import { useEffect, useState } from "react";


const columns = [
    {
        title: 'N',
        dataIndex: 'n',
        key: 'n',
    },
    {
        title: 'Uniq Id',
        dataIndex: 'uniqid',
        key: 'uniqid',
    },
    {
        title: 'City From',
        dataIndex: 'cityfrom',
        key: 'cityfrom',
    },
    {
        title: 'Adress From',
        dataIndex: 'adressfrom',
        key: 'adressfrom',
    },
    {
        title: 'City To',
        dataIndex: 'cityto',
        key: 'cityto',
    },
    {
        title: 'Adress To',
        dataIndex: 'adressto',
        key: 'adressto',
    },
    {
        title: 'Weight',
        dataIndex: 'weight',
        key: 'weight',
    },
    {
        title: 'Date',
        dataIndex: 'date',
        key: 'date',
    }
]



export default function AllOrders() {
    const [orders, setOrders] = useState<Order[]>([]);

    useEffect(() => {
        const getOrders = async () => {
            const responce = await getAllOrders();
            setOrders(responce);
            console.log('orders_from_responce: ', responce);
        };
        getOrders();
    }, []);   

    const data = orders.map((order, index) => ({
        key: index,
        n: (index+1),
        uniqid: order.id,
        cityfrom: order.cityfrom,
        adressfrom: order.adressfrom,
        cityto: order.cityto,
        adressto: order.adressto,
        weight: order.weight,
        date: order.date
    })) 

    return (
        <div >
            <h1>Все заказы</h1>
            <Table
                dataSource={data}
                columns={columns}
                pagination={false}
                footer={() => ""}
                bordered
            />
        </div >
    );
}

数据模型是Order：

export interface Order {
    id: string;
    cityfrom: string;
    adressfrom: string;
    cityto: string;
    adressto: string;
    weight: number,
    date: Date,
    specialnote: string
}

该模型用于此生产线const [orders, setOrders] = useState<Order[]>([]);。数据与模型相符。

4 列类型未显示string，因此我认为问题出在数据类型不匹配。同时，id（uuid）列string也可见。

您需要编写一个函数，根据对象的 id 和 items 中元素的 id，更改活动状态。这样的函数怎么写呢？这就是我的对象的样子：

const [items, setItems] = useState([
    {
      id: 'settings',
      name: 'Settings',
      items: [
        { id: 'rest', name: '', active: false },
        { id: 'gm', name: '', active: false },
      ],
    },
  ]);

用法示例：handleChangeActive(“settings” “rest”);

active: !!active

我写了 hook useTheme，我们将有标准主题：黑暗和光明。但我还想添加一个“创建主题”按钮，当您单击它时，将新主题添加到自定义主题；默认情况下，我们添加的所有主题都被禁用。如果我们已经包含了自定义主题，则不需要添加属性data-theme，而只需获取其中的所有内容details并将其传递给setProperty.键是我们的类型--background, --color，值是颜色。您能帮助实施吗？））

我假设我们需要添加每个主题active: false，当您单击分离的主题时，更改状态并检查主题的整个列表，以确定包含哪个主题并更改它。

使用主题.js

export const useTheme = () => {
    // Получить системную тему пользователя
    const getSystemTheme = () => window?.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

    const [theme, setTheme] = useState(localStorage.getItem('app-theme') || getSystemTheme());

    // Получить кастомные темы пользователя
    const getCustomThemes = () => JSON.parse(localStorage.getItem('custom-themes')) || [];

    // Добавить обьект темы в LocalStorage custom-themes
    // Example: addCustomTheme({name: 'Название тема', details: [background: 'orange']})
    const addCustomTheme = obj => {
        if (getCustomThemes().find(t => t.name === obj.name)) return false;

        localStorage.setItem(
            'custom-themes', 
            JSON.stringify(
                [
                    ...getCustomThemes(), 
                    { ...obj, active: false }
                ]
            )
        );
    }

    useLayoutEffect(() => {
        document.documentElement.setAttribute('data-theme', theme);
        localStorage.setItem('theme', theme);
    }, [theme]);

    return { currentTheme: theme, setTheme, addCustomTheme };
}

请告诉我如何将颜色值从外部对象转发到组件并将其直接应用于对象？在这种情况下，我的颜色存储在 Color.jsx 文件中，我将它们连接到根组件并希望将它们转发到 ItemCard，并通过它转发到 Btn，但没有任何反应......我查看了一堆指南并不知道如何传播正在发挥作用。 UPD：感谢评论员，我更正了寄存器，现在它给出了一个错误，Cannot read property "active" of undefined.它位于根组件中，如果您删除 itemCard 道具的转发，那么一切至少都可以工作。那么如何传递道具呢？

import Color from '../constansts/Color.jsx'

export default function App() {
    return (
        <SafeAreaView style={BasicStyles.container}>
          <StatusBar style="auto" />
          <Header/>
          <HomeSlider/>
          <ItemCard color={Color.active}/>
        </SafeAreaView>
    );
}

export default function ItemCard(props) {
    return (
        <View>
          <Btn color={props.Color.active}/>
        </View>
    )
}

export default function Btn(props) {
    return (
        <Pressable style={ButtonStyles.wrapper} color={props.color.active}>
    )
}