踩坑记录三

2022-07-16 20:31:37 阅读：94 来源： 互联网

标签：const 记录 roomNumber return item console data

关于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>

标签：const,记录,roomNumber,return,item,console,data
来源： https://www.cnblogs.com/bqyb/p/16467564.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

踩坑记录三