React 项目

功能

1. 如何传图片文件

来源：react axios post multipart/form-data-掘金 (juejin.cn)

演示代码：

1. 安装 Axios 和 FormData

   在终端中使用以下命令安装 Axios 和 FormData：

   npm install axios form-data

2. 导入 Axios 和 FormData

   在你的组件中，使用 import 导入 Axios 和 FormData：

   import axios from 'axios'; import FormData from 'form-data';
   

3. 创建 FormData 对象并设置数据

   在需要发送 multipart/form-data 数据的地方，创建一个 FormData 对象并设置数据：

   const formData = new FormData(); formData.append('file', file); formData.append('name', name);
   

   在这里，file 是要上传的文件，name 是文件的名称或其他表单字段的值。

4. 发送 POST 请求

   使用 Axios 发送 POST 请求并携带 FormData 数据：

   axios.post('https://example.com/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) .then(response => { console.log(response.data); }) .catch(error => { console.log(error); });
   

   在这里，第一个参数是 URL，第二个参数是 FormData 对象，第三个参数是包含请求头的配置对象。请求头中的 Content-Type 属性设置为 multipart/form-data，以确保服务器正确解析请求。

   在 then 方法中，可以处理成功响应，例如在控制台中输出响应数据。在 catch 方法中，可以处理失败响应，例如在控制台中输出错误信息。

2. 判断字符串是否为数字或者小数

以下是不正确的用法：

var str = "37";
if (typeof(str) == "number")
{
    alert("是数字");
}

37 虽然可以转化成数字，但这里它毕竟是字符串类型，所以此法不正确。

正确做法：

var str = "37";
var n = parseInt(str);
if (!isNaN(n))
{
    alert("是数字");
}

parseInt 会将字符串转化成整数，但它会忽略非数字部分而不给任何提示，比如："37ABC" 会转化成 37，所以此法不正确。

方法 / JS / HTML

1. data数据过滤

使用 filter方法

项目演示案例

import React, { useEffect, useState } from 'react'
import { Grid, Space } from 'antd-mobile'
import style from './style.module.css'
import { StarOutline } from 'antd-mobile-icons';
//导入商品图片
import example1 from '../../assets/pics/recommend_goods_example/bed-1.png';
import example2 from '../../assets/pics/recommend_goods_example/bed-2.png'
import example3 from '../../assets/pics/recommend_goods_example/closet-1.png'
import example4 from '../../assets/pics/recommend_goods_example/lamp-1.png'
import example5 from '../../assets/pics/recommend_goods_example/sofa-1.png'
import example6 from '../../assets/pics/recommend_goods_example/vase-1.png'
import { isVisible } from '@testing-library/user-event/dist/utils';
import { useNavigate } from 'react-router-dom';
export default function SearchContent(props) {
    const navigate = useNavigate();

    //参数
    const { searchtitle } = props
    //推荐商品图片EXAMPLE
    const recommends = [{
        url: example1,
        name: 'Standard Bed',
        user: 'Ansel',
        goodsReleasDate: '2023-12-1',
        goodsId: '0001',
        price: 123.12,
        ifsale: false,
        category: 'funiture'
    }, {
        url: example2,
        name: 'Standard medium size Bed',
        user: 'Ansel',
        goodsReleasDate: '2023-12-1',
        goodsId: '0002',
        price: 115.12,
        ifsale: true,
        category: 'funiture'
    }, {
        url: example3,
        name: 'Fine closet ',
        user: 'Jamie',
        goodsReleasDate: '2023-12-2',
        goodsId: '0003',
        price: 100.00,
        ifsale: false,
        category: 'wardrobe'
    }, {
        url: example4,
        name: 'White Lamp from EKEA',
        user: 'Tommy',
        goodsReleasDate: '2023-12-23',
        goodsId: '0004',
        price: 12.12,
        ifsale: false,
        category: 'lamp'
    }, {
        url: example5,
        name: 'Classic Sofa',
        user: 'Laura',
        goodsReleasDate: '2023-12-22',
        goodsId: '0005',
        price: 41.12,
        ifsale: false,
        category: 'funiture'
    }, {
        url: example6,
        name: 'Vase',
        user: 'Ansel',
        goodsReleasDate: '2023-12-1',
        goodsId: '0006',
        price: 8,
        ifsale: false,
        category: 'pottery'
    }]

    //state参数:记录total数据
    const [total, setTotal] = useState(0)
    let count = 0;
    //过滤数据
    const filteredData = recommends.filter((r) => {
        if (searchtitle === '') {
            return r;
        }
        return r.name.toLowerCase().includes(searchtitle);
    });

    const [itemId, setItemId] = useState(0)
    useEffect(() => {
        console.log('@filteredData', filteredData);
        console.log('1', count);
        //讲count值赋给total
        setTotal(count)
        //用于跳转商品详情
        console.log('itemId', itemId);
        if (itemId !== 0) {
            navigate(`/detail?itemid=${itemId}`)
        }
    })
    //前往商品详情

    

    const items = filteredData.map((item, index) => {
        count = index + 1;
        console.log(item.name, item.ifsale);
        return <Grid.Item>
            <div className={style.container}>
                <div className={style.itemhead}>
                    <a><StarOutline /></a>  <span style={{ float: 'left', color: '#1677FF' }}>{item.user}</span>
                    <span style={{ float: 'right' }}>{item.goodsReleasDate}</span>
                </div>
                <img
                    onClick={() => { setItemId(item.goodsId) }}
                    src={item.url}
                    style={{
                        display: 'block',
                        width: '100%',
                        height: '3.6rem',
                        verticalAlign: 'top',
                        padding: '0.17rem',
                        boxSizing: 'border-box',
                        borderRadius: '25px',
                    }} />
                <span style={{
                    display: `${item.ifsale ? 'block' : 'none'}`,
                    position: 'absolute',
                    fontSize: '1rem',
                    color: 'red',
                    left: 0,
                    top: '0.7rem',
                }} className='iconfont icon-seld_out'></span>
                <div className={style.content}>
                    <span> {item.name}</span>  <br />
                    <span style={{ color: 'grey' }}> ￡{item.price} </span>
                </div>
            </div>
        </Grid.Item>
    })

    return (
        <div>
            <div className={style.header}>
                Results:{total}
            </div>
            <Grid columns={1}>
                {items}
            </Grid>
        </div>
    )
}

2. 函数式编程子组件向父组件传递数据

注意: 父子都要加 function(props)
//父：
    const city = (data) => {
        console.log('city name =>' + data);
    } 
<Choose city={city} />

//子：
function click(name) {
        props.city(name);
    }

    const items = filteredData.map((data, index) => {
        return <Grid.Item>
            <span
                style={{ color: 'white' }}
                onClick={() => { setCity(data.name); click(data.name) }}>{data.name}</span>
        </Grid.Item>
    })

3.遍历数据展示例子

    //用于保存tabs点击数据
    const [value, setValue] = useState('Furniture');
    //分类数据
    const [items, setItems] = useState([])


    //useEffect
    useEffect(() => {
        console.log('value', value);
        switch (value) {
            case 'Furniture':
                setItems(furniture);
                break;
        }
    })
    //遍历数据
    const showItems = items.map((item) => {
        console.log(123);
        console.log(item.url);
        return <Grid.Item>
            <img
                style={{
                    width: '2.4rem',
                    height: '2.3rem',
                    marginTop: '0.3rem',
                    paddingLeft: '0.2rem'
                }}
                src={item.url}
            />
            <div style={{
                textAlign: 'center',
                fontSize: '0.3rem',
                height: '0.4rem',
                lineHeight: '0.4rem',
                fontWeight: '500'
            }}>{item.name}</div>
        </Grid.Item>
    });

问题

1.axios传递json后端无法收到

原因：axios会对params中的对象类型值转换为json并进行url编码，但是编码不会处理方括号：’[’, ‘]’

我的解决方案："filepath": filePath + ""