Блог

Ничего не происходит, когда я нажимаю на кнопку сброса. Я не понимаю, как это исправить, у вас, ребята, есть какие-нибудь идеи? Спасибо! Пожалуйста, дайте мне знать, если мне нужно добавить больше информации. Я пытаюсь получить его туда, где я могу нажать сортировку, а затем вернуться к исходному отображению. Заранее большое вам спасибо!

 const ToyList = (props) => {
  const [sortedToys, setSortedToys] = useState(false)
  const dispatch = useDispatch()

  // imitates componentdidmount because it runs right away as soon as the component loads
  useEffect(() => {
    dispatch(fetchToys())
    
  },[dispatch])

 const sortToys = (toys) => {
    if (sortedToys === true) {
    return toys.sort( (toyA, toyB) => toyA.name.localeCompare(toyB.name))
    }
    if (sortedToys === false) {
      return toys 
    } else {
    return toys }}

    function HandleSortOptionChange() {
      setSortedToys(true)
    }

    function HandleSortOptionChangeFalse(e) {
      setSortedToys(false)
    }
    
    return (
       <div>
      <div className="sortDiv">
        <Button className="m-3" value="toy" onClick={HandleSortOptionChange}>Toys A-Z</Button>
        <Button className="m-3" value="toy" onClick={HandleSortOptionChangeFalse}>Reset</Button>
      </div>
      <div>

      </div>
        {props.toys ? sortToys(props.toys).map(toy =>
        <Container fluid>
        <Row>
            <Col key={toy.id}>
                <Card style={{ width: '17rem' }} className='text-center'>
              <Link to={`/toys/${toy.id}`}>{toy.name}
              <Card.Img variant='top' src={toy.image_url} alt="toyimage" width="300" height="300" /></Link>
              </Card>
            </Col>
        </Row>
        </Container>     
          )
        : <h2> Loading </h2>}
        </div>
    )
        }

    const mapStateToProps = (state) =>
     ({ toys: state.toys })

export default connect(mapStateToProps, {fetchToys})(ToyList)
 

.sort изменяет исходный массив, поэтому, если для sortedToys когда-либо было установлено значение true, исходный массив toys всегда сортируется, поэтому, даже если вы возвращаете toys с значением false, он все равно будет отсортирован.

Вам не нужны sortToys, и действительно лучше, чтобы компонент возвращал JSX; вот переформатированный способ, при котором вам не понадобится эта отправка, и вы можете использовать useEffect для самого состояния toys.

 const ToyList = (props) => {
  const [toys, setToys] = useState([]);
  const [sortToys, setSortToys] = useState(false);
  const [startingToys, setStartingToys] = useState([]);

  // On launch we can save the inital order to state
  useEffect(() => {
    // Set the toys
    setToys(fetchToys());
    // Save this ordering
    setStartingToys(toys);
  }, []);


  // Whenever sortToys changes, we can also change toys
  // thus re-rendering the list in the order you want
  useEffect(() => {
    if (sortToys) {
      setToys(toys.sort((a, b) => a.name.localCompare(b.name)));
    } else {
      setToys(startingToys);
    }
  }, [sortToys]);


  // Function to change the sort
  const handleSortChange = () => setSortToys(() => !sortToys);


  return (
    <>
      {/* Your JSX Here */}
    </>
  );
}