5
Уже давно стандартом для фреймвёрков считается https://codesandbox.io/. Проект создаётся на основе стандартного. Можно подключать npm-модули, можно писать код в разных файлах.
4
Для того, чтобы reactjs понял, что состояние изменилось, нужно заменить
posts.push(res);
setPosts(posts);
на это
setPosts([...posts, res]);
4
У <video> есть события, которые вы можете использовать:
play - когда видео начинает проигрываться
seeking - когда видео начинает проматываться
ended - когда видео закончилось
Подробнее здесь: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
В событии play вы запоминаете текущую позицию видео (если это начало - то будет позиция 0). В ...
3
Сохранить последнее время когда был онлайн.
При очередном подключении вычесть из текущего времени время последней активности.
Пересчитать показатели на основе прошедшего времени.
2
Изменение чего-то внутри state является антипаттерном, но если по какой-то причине от этого нельзя избавиться, то можно вместо setState стоит использовать forceUpdate:
class App extends React.PureComponent {
state = {
obj: { x: 10 }
}
render() {
return (
<p>
{this.state.obj.x}{" "}
<button onClick={this.no}&...
2
Это решение адаптировано под реакт, ниже предыдущее решение (когда про реакт еще не было упоминаний)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/...
2
Запрос данных из БД это асинхронный код. console.log - это синхронный код. В момент выполнения console.log данные ещё не получены. А когда вы смотрит данные в консоли они уже там. Можно поставить console.log после цикла for, внутри коллбека.
Вот пример который иллюстрирует данное поведение:
const result = [];
setTimeout(() => {
result.push("value");...
2
единственное, что приходит в голову:
const [working, setWorking] = useState(true)
const workTime = () => {
const notWorking = [[6, 7, 8, 9, 10], [6, 7]]
const currentDate = new Date()
const currentTime = currentDate.getHours()
const currentDay = currentDate.getDay()
if (notWorking[ +(currentDay >= 1 && currentDay &...
1
Думаю дело в том что localStorage хранит строковые данные. А вы пытаетесь достать булевое значение.
let titleStateKey = "false"
console.log(titleStateKey || true)
titleStateKey = "true"
console.log(titleStateKey || true)
titleStateKey = false
console.log(titleStateKey || true)
titleStateKey = true
console.log(titleStateKey || true)
1
Опечатка: Router должен быть Route :
import './App.css';
import About from './Components/jsx/About';
import Content from './Components/jsx/Content';
import Header from './Components/jsx/Header';
import Navbar from './Components/jsx/Navbar';
import { BrowserRouter, Route, Switch } from "react-router-dom";
function App() {
return (
<...
1
const Contact = ({avatar, first_name, last_name, email}) => {
const initials = first_name.charAt(0)+""+last_name.charAt(0);
return (
<ListGroupItem className="item">
<div>
{
null !== avatar
? <Image src={avatar} alt={initials} className=&...
1
Сделай это:
const newProfile = { ...profile } // Он создает новый объект.
// или же
const newProfile = Object.assign({}, profile)
newProfile[key] = ev.target.value
setProfile(newProfile)
Не этот:
const newProfile = profile // Он использует тот же объект. // неправильный
newProfile[key] = ev.target.value
setProfile(newProfile)
Вы напрямую изменяете ...
1
Не используйте splice. Это изменит исходные данные.
Вы можете использовать filter. для создания новых данных. Пример:
class App extends React.Component {
constructor(props) {
super(props)
this.state = { arr: ['Коля', 'Вася', 'Петя', 'Иван', 'Дима'] }
this.deleteItem = this.deleteItem.bind(this)
}
deleteItem(index) {
this.setState({ ...
1
Забудь про классы, переходи на функциональное программирование с хуками
const App = () => {
let [_state, setArray] = useState(['Коля', 'Вася', 'Петя', 'Иван', 'Дима']);
return (
<div>
<ul>
{
_state.map((item, index) => <li key={index}>{item}</li>)
}
...
1
setState работает асинхронно
Вызовы setState являются асинхронными, поэтому не стоит рассчитывать, что this.state отобразит новое значение мгновенно после вызова setState.
https://ru.reactjs.org/docs/faq-state.html#why-is-setstate-giving-me-the-wrong-value
1
Так Вы передаёте пропсу state, а внутри хотите использовать пропсу postsData, которой вообще нет у компонента.
const MyPosts = (props) => {
let posts = props.state.map(p => <Post msg={p.msg} likeCount={p.likeCount}/>);
return /* тут код */;
}
1
Лучше так:
Вариант 1
const userText = useMemo(() => {
switch (user) {
case 'Ivan':
return 'Пользователя зовут Иван';
case 'Boris':
return 'Пользователя зовут Борис';
default:
return 'Не знаю такого пользователя';
}
}, [user]);
return (
<div>{userText}</div>
);
Вариант 2
const userTextMap = {
'Ivan': '...
1
Можно, конечно, сделать так
{
user == 'ivan' ? 'Пользователя зовут Иван' :
user == 'Boris' ? 'Пользователя зовут Борис' : 'Не знаю такого пользователя'
}
Но я бы делал так
let res;
switch (user) {
case 'Ivan': res = 'Пользователя зовут Иван'; break;
case 'Boris': res = 'Пользователя зовут Борис'; break;
default:
res = 'Не знаю такого ...
ответ дан 26 фев в 20:23
Anton Shchyrov
29.9k22 золотых знака2424 серебряных знака5252 бронзовых знака
1
Технически, так:
// Предполагаю, что bag - объект, а это его методы
function bagFind(item) {
return bag.find(bagItem => bagItem.itemName == item.itemName)
}
function bagAdd(item) {
if (!item.count) {
throw new Error("Добавь item.count элементу " + item.itemName);
}
let bagItem = bagFind(item);
if (bagItem) {
bagItem.count += item....
ответ дан 26 фев в 13:12
OPTIMUS PRIME
23.2k33 золотых знака1616 серебряных знаков4141 бронзовый знак
1
Самый простой способ может быть таким: делаем валидацию по нажатии каждой клавиши (mode: "onChange"), далее из хука useForm из FormState берём переменную isValid. И по ней можно устанавливать необходимый класс.
import React from "react";
import { useForm } from "react-hook-form";
const App = () => {
const onSubmit = (data) ...
1
Как вариант
function summ(id, arr) {
return arr
.filter(({agent_id}) => agent_id === id)
.reduce((acc, item) => acc + item.amount, 0)
}
var data = [
{
"id": 35,
"agent_id": 3,
"first_name": "William",
"last_name": "Timi",
"country": "Ukraine",
"amount": 234.0,
"currency": "EUR",
"date": "...
1
Можно так (при отсутствии совпадений функция вернёт 0):
var data = [
{
"id": 35,
"agent_id": 3,
"first_name": "William",
"last_name": "Timi",
"country": "Ukraine",
"amount": 234.0,
"currency": "EUR",
"date": "2021-02-10",
"brand": "TradersPros",
"role": "Company Manager",
"img": "profile-...
ответ дан 15 фев в 20:21
vsemozhebuty
8,47222 золотых знака77 серебряных знаков1515 бронзовых знаков
1
Можно сделать например так: Добавляем Switch то есть только один Route будет выбран. Если не один не подходит то срабатывает Redirect. В данном случае имеем только 2 достуаных пути: корень / и /validpath
import React from "react";
import { BrowserRouter, Redirect, Route, Switch, Link } from "react-router-dom";
const App = () => {
...
1
Я бы на Вашем месте вынес бы эти вычисления с JSX. А там где key дал что-то вроде id или уникального значения. Есть предположение, что quantity - может повторится. Для того, чтобы сократить код можно использовать Optional chaining.
const cartQuantity = cart.find(item => item.product._id === product._id)?.quantity || '';
return (
<div className=&...
1
Вот рабочий вариант раутинга по вашему примеру. Немного упростил код, но принцип такой. Добавил переход на фильтрованный список.
import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
const linkStyle = {
border: "1px solid black",
padding: "1rem",
margin: "1rem",
...
1
window.open('https://stackoverflow.com/questions/14132122/open-url-in-new-window-with-javascript/14132265#14132265 ','','Toolbar=1,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0,Width=570,Height=520');"
1
Вы можете сделать проверку в отрисовке (render) и вернуть null, когда данных нет. Компонент не будет отрисован.
При получении данных с сервера они будут отображены как вам надо.
class Promo extends Component {
static defaultProps = {
products: []
};
render() {
if (!(this.props.products && this.props.products.length)) {
...
1
Вместо isFollowed: !this.isFollowed нужно isFollowed: !user.isFollowed
1
Вы можете создать папку images внутри src
и подключать картинки таким образом:
<img src={require("images/logo.svg")} />
В css будет обычное подключение картинок:
background-image: url("images/logo.svg");
1
В setState можно передать функцию, которая на вход получает текущий state, развернуть спредом selected и поменять (или добавить) элемент:
this.setState(state => ({
selected: {
...state.selected,
[event.target.id]: event.target.checked
}
}));
Допускаются только превышающие минимальную длину ответы с наивысшим рейтингом, не являющиеся общими
Связанные метки
reactjs × 3694javascript × 1942
redux × 448
node.js × 202
react-router × 169
react-native × 157
css × 147
html × 120
typescript × 112
webpack × 108
jsx × 100
create-react-app × 82
react-router-dom × 75
json × 67
axios × 64
react-hook × 62
frontend × 59
express × 56
state × 49
php × 48
массивы × 48
npm × 47
ecmascript-6 × 47
nextjs × 40
компоненты × 39