[英]Trying to rewrite a class component into a functional component
我正在嘗試將類組件轉換為功能組件,但遺憾的是我沒有按預期工作。 類組件動態呈現選擇行以更改狀態。 如果用戶選擇第一行上的數據,並選擇“無”以外的任何內容,則呈現第三個選擇行。
我試圖將其重寫為一個功能組件,但是當我更改第一行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) && 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) && 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;
嘗試從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);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.