react.js не работает рекурсивка

[riaron86]

чуть подправил код
const prop= {
checkboxi:

{ OS: {id:1,mname:'android',named:'Android'},
},

import React, {useContext, useState} from 'react';
import {AuthContext} from "../../context/index.js";

function Checkbox() {
    let k;
    const v=[];
        const prop=useContext(AuthContext);
        const [check,setCheck]=useState();
    setCheck(prop.checkboxi.forEach(([k, v]) => (k:v)
    ));
        return (
            <div>
                    <ul>
                        <li>{check}</li>
                    </ul>
            </div>
        );
}

export default Checkbox;

[riaron86]

не получилось вот код

const prop= {
checkboxi:

{ OS: {id:1,mname:'android',named:'Android'},
},
polzunok:
{
id:1,
name:"Цена",
start1:2000,
start2:7000,
minr:0,
maxr:10000
}};

import React, {useContext, useState} from 'react';
import {AuthContext} from "../../context/index.js";

function Checkbox() {
    const m= {};
        const prop=useContext(AuthContext);
    prop.checkboxi.forEach(([k, v]) => m[k]= {mname:v.mname,named:v.named});

    return (
            <div>
                    <ul>
                        <li>{m}</li>
                    </ul>
            </div>
        );
}

export default Checkbox;

ругается 3 раза prop.checkboxi.forEach is not a function

[ksa]

не получилось

Следи за руками (с)

const prop = {
	checkboxi: {
		OS: {id:1,mname:'android',named:'Android'},
    },
	polzunok: {
        id:1,
        name:"Цена",
        start1:2000,
        start2:7000,
        minr:0,
        maxr:10000
    }
};
Object.entries(prop.checkboxi.OS).forEach(([k, v]) => console.log(k, v))

[riaron86]

я хотел в объекте задать все чекбоксы и одном циклом вывести все в фасет меню
const prop= {
checkboxi:
{
OS: {id:1,mname:'android',named:'Android'},
RAM:{ {id:1,mname: '6gb',named: '6Gb'},
{id:1,mname: '4gb',named: '4Gb'}, },
ROM: {id:1,mname: '64gb',named: '64Gb'},

},
polzunok:
{
id:1,
name:"Цена",
start1:2000,
start2:7000,
minr:0,
maxr:10000
}};

import React, {useContext} from 'react';
import {AuthContext} from "../../context/index.js";

function Checkbox() {

        const prop=useContext(AuthContext);

            Object.entries(prop.checkboxi).forEach(([k, v]) =>Object.entries(prop.checkboxi.k).forEach(([j,l])=>console.log(k,j,l)) );


    return (
            <div>
                    <ul>
                        <li></li>
                    </ul>
            </div>
        );
}

export default Checkbox;

Но при добавлении Ram Rom phpstorm закрасил объект prop красным. еще вопрос цикл у меня правильный?

[ksa]

Но при добавлении Ram Rom phpstorm закрасил объект prop красным.

Так там у тебя проблема с синтаксисом...

еще вопрос цикл у меня правильный?

У тебя данные организованы не верно.

Если цикл выводит, что тебе нужно - значит он правильный.

[riaron86]

компонент ползунок не видит значений при проверке в компоненте leftmenu console.log(prop.polzunok.[0].maxr) к примеру выводит без ошибок)

import React,{useContext} from 'react';
import {AuthContext} from "../context/index.js";
import Polzunok from "./elements/Polzunok";
import Checkbox from "./elements/Checkbox";
function LeftMenu() {
    const prop=useContext(AuthContext);
    console.log(prop.polzunok[0].maxr)
    return (
        <div className="LeftMenu">
            <div className="polzun">
                <Polzunok polz={prop.polzunok[0]}/>
            </div>


        </div>
    );
}

//
export default LeftMenu;

import React,{useState,useRef,useEffect} from 'react';
import css from '../../css/components/Polzunok.css';

function Polzunok(polz) {
    const p=polz;
    const rangeq = useRef();
    const [inputMin,setInputMin]=useState(p.start1);
    const [inputMax,setInputMax]=useState(p.start2);

    const priceGap = 1000;

    useEffect(() => {
        let minPrice = parseInt(inputMin),
            maxPrice = parseInt(inputMax);
        if((maxPrice - minPrice >= priceGap) && maxPrice <= p.maxr){
            setInputMin(minPrice) ;
        }else{
            setInputMax(maxPrice);
            rangeq.right = 100 - (maxPrice / p.maxr) * 100 + "%";
        }
    }, [inputMin]);

    useEffect(() => {
        let minPrice = parseInt(inputMin),
            maxPrice = parseInt(inputMax);
        if((maxPrice - minPrice >= priceGap) && maxPrice <= p.maxr){
            setInputMin(maxPrice);
        }else{
            setInputMax(maxPrice);
            rangeq.current.style.right = 100 - (maxPrice / p.maxr) * 100 + "%";
        }
    }, [inputMax]);
    useEffect(() => {
        let minVal = parseInt(inputMin),
            maxVal = parseInt(inputMax);;
        if((maxVal - minVal) < priceGap){
            setInputMin(maxVal - priceGap);
        }else{
            setInputMin(minVal);
            setInputMax(maxVal);
            rangeq.current.style.left = ((minVal / p.maxr) * 100) + "%";
            rangeq.current.style.right = 100 - (maxVal / p.maxr) * 100 + "%";
        }
    }, [inputMin]);

    useEffect(() => {
        let minVal = parseInt(inputMin),
            maxVal = parseInt(inputMax);
        if((maxVal - minVal) < priceGap){
            setInputMax(minVal + priceGap);
        }else{
            setInputMin(minVal);
            setInputMax(maxVal);
            rangeq.current.style.left = ((minVal / p.maxr) * 100) + "%";
            rangeq.current.style.right = 100 - (maxVal / p.maxr) * 100 + "%";
        }
    }, [inputMax]);

    return (
        <div className="polzunok">
            <h4>{p.name}</h4>
            <div className="slider">
                <div className="progress" ref={rangeq}></div>
            </div>
            <div className="range-input">
                <input type="range" className="range-min" value={inputMin} onChange={e => setInputMin(e.target.value)} min={p.minr} max={p.maxr} step="100"/>
                <input type="range" className="range-max" value={inputMax} onChange={e => setInputMax(e.target.value)} min={p.minr} max={p.maxr} step="100"/>
            </div>
            <div className="price-input">
                <div className="field">
                    <span>Min</span>
                    <input type="number" className="input-min" value={inputMin} onChange={e => setInputMin(e.target.value)}/>
                </div>
                <div className="separator"></div>
                <div className="field">
                    <span>Max</span>
                    <input type="number" className="input-max" value={inputMax} onChange={e => setInputMax(e.target.value)}/>
                </div>
            </div>
        </div>
    );
}

export default Polzunok;

⁶

[riaron86]

А сам массив porp.push({start1:2000,start2:7000,name: "Ползунок ",minr:0,maxr:10000})

[riaron86]

Не работает функция unique для фильтрации массивов

[riaron86]

checkboxi.push(
        {id:1,mname:'os',named:'Андроид',phdr:'Операционная Система'},
        {id:2,mname:'os',named:'Айос',phdr:'Операционная Система'},
        {id:3,mname:'os',named:'Виндоус',phdr:'Операционная Система'},
        {id:4,mname:'ram',named:'2Гб',phdr:'Оперативная Память'},
        {id:5,mname:'ram',named:'4Гб',phdr:'Оперативная Память'},
        {id:6,mname:'ram',named:'6Гб',phdr:'Оперативная Память'},
        {id:7,mname:'ram',named:'8Гб',phdr:'Оперативная Память'},
        {id:8,mname:'ram',named:'12Гб',phdr:'Оперативная Память'},
        {id:9,mname:'rom',named:'32Гб',phdr:'Память'},
        {id:10,mname:'rom',named:'64Гб',phdr:'Память'},
        {id:11,mname:'rom',named:'128Гб',phdr:'Память'},
        {id:12,mname:'rom',named:'256Гб',phdr:'Память'},
        {id:13,mname:'diagonal',named:'5.8',phdr:'Диагональ'},
        {id:13,mname:'diagonal',named:'6.2',phdr:'Диагональ'},
        {id:13,mname:'diagonal',named:'6.4',phdr:'Диагональ'},
        {id:13,mname:'diagonal',named:'6.6',phdr:'Диагональ'},
        {id:13,mname:'dpi',named:'1280 × 720',phdr:'Разрешение'},
        {id:13,mname:'dpi',named:'1920 × 1080',phdr:'Разрешение'},
        {id:13,mname:'dpi',named:'3840 × 2160',phdr:'Разрешение'},
        {id:13,mname:'dpi',named:'7680 × 4320',phdr:'Разрешение'},
        {id:13,mname:'dsim',named:'2x SIM',phdr:'Количество Сим Карт'},
        {id:13,mname:'dsim',named:'1x SIM',phdr:'Количество Сим Карт'},
    )

import React from 'react';

function Checkboxes(check) {
const m=0;
const n='';
const f=[];
const d=[];
   Object.entries(check.props.checkboxi).forEach(([k, v])=>f.push(k,v));
    f.forEach(function(n,m,d){
        if(d.includes(n)){
            console.lod('в d уже есть n');
        }else{
            d.push(n);
            console.log(d);
        }
    });

//console.log(f);


    return (
        <div>
            {}
        </div>
    );
}

export default Checkboxes;

[Nexus]

riaron86, вы суда просто какие-то фрагменты кода постите?