#javascript #reactjs #react-hooks
#javascript #reactjs #реагирующие хуки
Вопрос:
Я пытаюсь преобразовать компонент класса в функциональный компонент, но, к сожалению, работает не так, как я ожидаю. Компонент класса динамически отображает строки выбора для изменения состояния. если пользователь выбирает данные в первой строке и выбирает что-либо еще, кроме «none», отображается третья строка выбора.
Я попытался переписать это в функциональный компонент, но когда я меняю данные в первой строке select, все исчезает.
Компонент класса:
import React from 'react';
import Books from './Books';
const TYPES = [
{ slug: 'title', description: 'Title' },
{ slug: 'author', description: 'Author' },
{ slug: 'editionYear', description: 'Edition Year' }
];
class BookListSorter extends React.Component {
state = {
sortBy: [ { author: 'asc' } ]
};
getSortByKeyForIndex = (index) => Object.keys(this.state.sortBy[index] || {})[0];
getSortByValueForIndex = (index) => Object.values(this.state.sortBy[index] || {})[0];
changeSort = (key, index) => (e) => {
const { target } = e;
this.setState(({ sortBy }) => {
const type = key === 'type' ? target.value : this.getSortByKeyForIndex(index);
const direction = key === 'direction' ? target.value : this.getSortByValueForIndex(index);
console.log(sortBy);
return type || direction ? sortBy.splice(index, 1, { [type]: direction }) : sortBy.splice(index, 1);
});
};
filterTypes = (index) => ({ slug }) => {
const sortByKeys = this.state.sortBy
.slice(0, index)
.reduce((keys, sortObj) => keys.concat(Object.keys(sortObj)[0]), []);
return !sortByKeys.includes(slug);
};
render() {
const { sortBy } = this.state;
const lastIndex = sortBy.length - 1;
const shouldAddNewRow = this.getSortByKeyForIndex(lastIndex) amp;amp; this.getSortByValueForIndex(lastIndex);
const rowCount = shouldAddNewRow ? sortBy.length 1 : sortBy.length;
return (
<div>
<h1>Choose sort order</h1>
{Array.from(Array(Math.min(rowCount, TYPES.length))).map((dummy, index) => (
<div>
<select
defaultValue={this.getSortByKeyForIndex(index)}
onChange={this.changeSort('type', index)}
>
<option value="">None</option>
{TYPES.filter(this.filterTypes(index)).map(({ slug, description }) => (
<option value={slug}>{description}</option>
))}
</select>
<select
defaultValue={this.getSortByValueForIndex(index)}
onChange={this.changeSort('direction', index)}
>
<option value="asc">None</option>
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
</select>
<br />
</div>
))}
<br />
<Books order={sortBy} />
</div>
);
}
}
export default BookListSorter;
Функциональный компонент:
import React, { useContext, useState } from 'react';
import OrderContext from '../context/order-context';
const TYPES = [
{ slug: 'title', description: 'Title' },
{ slug: 'author', description: 'Author' },
{ slug: 'editionYear', description: 'Edition Year' }
];
const BookListSorter = () => {
const { dispatch } = useContext(OrderContext, []);
const [ order, setOrder ] = useState([ { title: 'asc' } ]);
const getSortByKeyForIndex = (index) => Object.keys(order[index] || {})[0];
const getSortByValueForIndex = (index) => Object.values(order[index] || {})[0];
const changeSort = (key, index) => (e) => {
const { target } = e;
setOrder((order) => {
const type = key === 'type' ? target.value : getSortByKeyForIndex(index);
const direction = key === 'direction' ? target.value : getSortByValueForIndex(index);
console.log(order);
return type || direction ? order.splice(index, 1, { [type]: direction }) : order.splice(index, 1);
});
};
const filterTypes = (index) => ({ slug }) => {
const sortByKeys = order.slice(0, index).reduce((keys, sortObj) => keys.concat(Object.keys(sortObj)[0]), []);
return !sortByKeys.includes(slug);
};
const lastIndex = order.length - 1;
const shouldAddNewRow = getSortByKeyForIndex(lastIndex) amp;amp; getSortByValueForIndex(lastIndex);
const rowCount = shouldAddNewRow ? order.length 1 : order.length;
return (
<div>
<h1>Choose sort order</h1>
{Array.from(Array(Math.min(rowCount, TYPES.length))).map((dummy, index) => (
<div>
<select defaultValue={getSortByKeyForIndex(index)} onChange={changeSort('type', index)}>
<option value="">None</option>
{TYPES.filter(filterTypes(index)).map(({ slug, description }) => (
<option value={slug}>{description}</option>
))}
</select>
<select defaultValue={getSortByValueForIndex(index)} onChange={changeSort('direction', index)}>
<option value="asc">None</option>
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
</select>
<br />
</div>
))}
<br />
</div>
);
};
export default BookListSorter;
Комментарии:
1. Какая-либо конкретная причина, по которой вам нужно его преобразовать?
2. ДА. В компоненте класса я передаю состояние в качестве реквизита другому компоненту под названием Books. Чтобы сделать его более многоразовым и избежать использования redux, я меняю компонент класса на функциональный компонент и использую useState, useReducer и useContext, чтобы я мог поделиться состоянием, не делая компонент books дочерним элементом BookListSorter
3. @asotos Вы упускаете суть функциональных компонентов. Они не более пригодны для повторного использования. Вы все еще можете использовать контекст и состояние в компонентах класса. Предоставление работоспособной демонстрации увеличит ваши шансы получить ответ. Существует большое количество кода, который необходимо отладить.
Ответ №1:
Попробуйте извлечь эту логику из setOrder()
const changeSort = (key, index) => (e) => {
const { target } = e;
const type = key === 'type' ? target.value : getSortByKeyForIndex(index);
const direction = key === 'direction' ? target.value : getSortByValueForIndex(index);
console.log(order);
const newOrder = type || direction ? order.splice(index, 1, { [type]: direction }) : order.splice(index, 1);
setOrder(newOrder);
};