踩坑记录三

关于axios获取到的数据小坑：

获取到的res.data不是一个数组，res.data.data才是数组数据，

axios.get('http://192.168.50.229:3000/order')
    .then(res => {
        console.log("数据", res.data.data.length, res.data.data);
    )

 

另外说一句这样获取的时间数据是字符串，可以：

startTime = new Date(data.startTime);

关于TSX的array.push(item)覆盖前面数据的问题：

//错误的写法
data.push(itemData);

//正确的写法
data.push(JSON.parse(JSON.stringify(itemData )));

antd 数组中的render使用方法：

render:(gmt_create: Date) => {return moment(gmt_create).format("YYYY-MM-DD HH:mm:ss")}

render:(gmt_create: Date) => moment(gmt_create).format("YYYY-MM-DD HH:mm:ss")

上面的两种写法都是正确的，看个人想怎么用怎么用

初次渲染时的axios.get()数据显示问题：

解决方案：

const [tableLoding, setTableLoding] = useState(false);

useEffect(() => {
　　getTable();
},[])

const getTable = async () => {
    setTableLoding(false);
    const 获取的数据 = await axios.get('http://192.168.50.229:3000/order')
    setTableLoding(true);
}
return (
    {( !tableLoding ? "...loding" : <div>console打印数据{console.log(获取的数据)}</div>}
)

 数组更新的渲染问题：

解决方案：

const [data, setData] = useState(roomDataSource);

useEffect(() => {
    let temp = [...roomDataSource];
    temp.splice(0, temp.length);
    roomDataSource.map(item => {
        if (item.roomNumber === roomNumber) {
            console.log("item", item);
            temp.push(JSON.parse(JSON.stringify(item))

　　　　}
　　}); 
　　console.log("temp", temp); 
　　setData([...temp]); //这样做的时候，React才认为数组改变了（React不认为数组改变的时候就不会重新渲染）
　　console.log("data", data); 
}, [roomNumber]); //每次roomNumber改变的时候都会更新数组渲染

 React模拟自动聚焦效果（所有标签）：

react虽然提供了自动动聚焦的属性autoFocus，但是好像只有input才能使用，接下来实现的是可以针对任何标签使用的代码：

　const [defaultNumer, setDefaultNumer] = useState('205');

useEffect(() => {
    autoFocusRoom();
}, []);
//只在页面初次渲染时自动聚焦，如有需要可以替换成其它，如：
//useEffect(() => {
//    autoFocusRoom();
//}, [focusItem]);

const autoFocusRoom = () => {
    let dom = document.getElementById(focusItem);
    if (dom) {
        dom.scrollIntoView({ behavior: 'smooth', block: 'end' })
    } 
};
//接下来只需要给你需要自动聚焦的标签加上id={focusItem}即可
return (
    <div id={focusItem}>自动聚焦</div>
)

当然这样只是实现了页面自动滚动到目标，并不会模拟自动聚焦的效果，可以使用下面的代码来达到效果：

//当defaultNumer等于roomNumber.key时就会有className="onRoomNumber"的效果
return (
    {roomNumber.map((itemData) => {
        return (
            <button
                className={defaultNumer=== itemData.key ? "onRoomNumber" : "roomNumber"}
                key={itemData.key}
                id={itemData.key}
                onClick={() => setIndex(2, itemData.key)}>
                {itemData.number}
            </button>
        )
    })}
)

number转string：

只需要使用空字符串''加伤number类型的数据即可，单引号之间不要有任何的东西：

import { useEffect, useState } from "react";

function Test() {
    const [defaultNumer, setDefaultNumer] = useState('205');
    const [roomNumber, setRoomNumber] = useState(205);

    useEffect(() => {
        console.log(((roomNumber+'') === defaultNumer ? "相等" : "不同"));
    }, []);
    
    return (
        <div>this is test</div>
    )
}

 数据跟新导致defaultValue不更新的问题：

//当key值发生变化组件会重新渲染，加一个key值随着改变即可
<Select
    key={(data.length === 0 ? null : data[0].key)}
    defaultValue={(data.length === 0 ? null : data[0].key)}
    style={{ width: "200px" }}>
    {data.map(item => {
        return <Option key={item.key}>{item.key}</Option>
    })}
</Select>