чуть подправил код
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;
|
не получилось вот код
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 |
Цитата:
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))
|
я хотел в объекте задать все чекбоксы и одном циклом вывести все в фасет меню
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 красным. еще вопрос цикл у меня правильный? |
Цитата:
Цитата:
Если цикл выводит, что тебе нужно - значит он правильный. |
компонент ползунок не видит значений при проверке в компоненте 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;
⁶ |
А сам массив porp.push({start1:2000,start2:7000,name: "Ползунок ",minr:0,maxr:10000})
|
Не работает функция unique для фильтрации массивов
|
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;
|
riaron86, вы суда просто какие-то фрагменты кода постите?
|
| Часовой пояс GMT +3, время: 18:49. |