React 中的清除按钮清除输入但不重置数组元素

Question

I try to make a simple meme generator where a user can add a text and change the image on click. Both is working but my clear-button only clears the input field and don't get back to the first image (array[o]). I mean if I conole.log the "element" it says "0" but it don't change the image to the first one.

My code of App.js so far:

import React, { useEffect, useState } from "react";
import "./styles.css";

function useCounter(initialCount = 0) {
  const [count, setCount] = React.useState(initialCount);
  const increment = React.useCallback(() => setCount((c) => c + 1), []);
  return { count, increment };
}

export default function App() {
  let { count: element, increment } = useCounter(0);
  const [memes, setMemes] = useState([]);
  const [topText, setTopText] = useState("");

  useEffect(() => {
    async function asyncFunction() {
      const initialResponse = await fetch("https://api.imgflip.com/get_memes");
      const responseToJSON = await initialResponse.json();
      setMemes(responseToJSON.data.memes);
    }
    asyncFunction();
  }, []);
  const clear = (e) => {
    setTopText("");
    element = 0;
    console.log(element);
  };
  return (
    <div className="App">
      {memes[0] ? (
          <div
            style={{
              height: "300px", 
              backgroundImage: `url(${memes[element].url})`
            }}
          >
            <p>{topText}</p>
            <input
              value={topText}
              onChange={(e) => setTopText(e.target.value)}
              type="text"
            />
            <button onClick={clear} type="reset">Clear</button>
            <button onClick={increment}>Change Image</button>
          </div>
      ) : (
        "loading"
      )}
    </div>
  );
}

What is wrong?

Answer 1

You are attempting to mutate state. You should never directly assign a new value to a stateful variable element = 0 . You should use the provided updater function from useState ( setCount ).

One solution would be to add a reset function to your custom hook and use it:

function useCounter(initialCount = 0) {
  const [count, setCount] = React.useState(initialCount);
  const increment = React.useCallback(() => setCount((c) => c + 1), []);
  const reset = () => setCount(initialCount);
  return { count, increment, reset };
}

In your component:

const { count: element, increment, reset: resetCount } = useCounter(0);

const clear = (e) => {
  setTopText("");
  resetCount();
};

Notice I've also changed the custom hook to use a const instead of let . This is recommended to encourage immutable usage of state, and give helpful errors when breaking that rule.