React doesn't display initial state of UI on start-CodePudding

The

Explain demo: On start, it renders oldest items first. Have to choose another option and then return to the latest option for it to render. But in the console, the initial state of sort is already "latest" but it doesn't match with the useEffect sorting logic.

Update

According @idembele70's answer, I mistyped the initial state of filters to Array.

I have fixed it and also added a name="sort" on the Sort select.

I also replaced value="latest" with defaultValue="latest" for my Sort select bar. -> This makes the Latest option stop working so I don't think it can be used in this case?

The result is still the same, the UI doesn't render the logic of the Sort bar to display the latest items first.

Code

const ProductList = () => { const location = useLocation() const category = location.pathname.split("/")[2] const [filters, setFilters] = useState({}); const [sort, setSort] = useState("latest"); const handleFilters = (e) => { const value = e.target.value // When choosing default value, show all products: if (value === "") { setFilters({}) // Changed from array to object } else { setFilters({ ...filters, [e.target.name]: value, }) } }

...

<Filter> <FilterText>Sort Products: </FilterText> <Select name="sort" onChange={e => setSort(e.target.value)} > <Option defaultValue="latest">Latest</Option> <Option value="oldest">Oldest</Option> <Option value="asc">Price ↑ (Low to High)</Option> <Option value="desc">Price ↓ (High to Low)</Option> </Select> </Filter>

CodePudding user response：

i faced a problem with this code from lama, so first i see a error from you define useState with a initialState as object and in your handleFilters you use an array

const [filters, setFilters] = useState({}); // you use Object there const handleFilters = (e) => { const value = e.target.value products: if (value === "") { return setFilters([]) //. you should use object there not array. } else { setFilters({ ...filters, [e.target.name]: value, }) }}

So in React when you use onChange it's recommended to use a value or defaultValue in your html elems to solve this problem take a look to this CodeSandebox link: https://codesandbox.io/s/determined-hopper-gp9ym9?file=/src/App.js Let me know if it has solved your problem.

CodePudding user response：

If you put log inside your useEffect hooks, I would assume the execution order is:

[sort]->[category]->[category, filters, products]

The useEffect of [category] has an ajax call and it will definitely take effect after [sort], when it taking effect, it will run your query which is not using req.query.new, so it will just run this branch(i guess you do have category)

else if (queryCategory) { products = await Product.find({ categories: { $in: [queryCategory], }, }) }

, it should default return a ascending list just match 'oldest' option.

So in general, your sort effect is not working at all on initial load because it will always get overwritten by other effects.

So either you make all the query with default descending condition to match the default 'latest' option, or you could trigger sort after any query was performed, option 2 looks better but you need to consider what's your expected behavior of sort when changing other elements(filter, category).