I created a button that fetch data and place it in a field, i also created a remove button which deletes all the data in the field, but when I press the remove button, it works, but it automatically adds a new one (thats also part of my task, but not like that). If anyone can help me on how to make those fields to remain empty, would much appreciate.

    const fetchapi = async () => {
        try {
          await axios
            .get("https://random-data-api.com/api/v2/addresses")
            .then((response) => {
              setAllData(response.data);
              //console.log(allData);
              //console.log(setAllData);
              console.log(response.data);
            });
        } catch (error) {
          console.log(error);
        }
        //return allData;
      };
      const removeElement = (index) => {
        const newData = fetchapi((_, i) => i !== index);
        setAllData(newData);
      };
      return (
        <Fragment>
          <div>
            <button onClick={fetchapi}>Fetch Location</button>
            {!allData ? null : (
              <div
                style={{
                  backgroundColor: "#c7c7c7",
                  display: "flex",
                  flexDirection: "column",
                  padding: 16,
                  margin: 5,
                  borderRadius: 20
                }}
              >
                <p>
                  <strong>Address: {allData.street_address}</strong>
                </p>
                <p>
                  <strong>City: {allData.city}</strong>
                </p>
                <p>
                  <strong>Street Name: {allData.street_name}</strong>
                </p>
                <p>
                  <strong>Zipcode: {allData.zip_code}</strong>
                </p>
                <button onClick={removeElement}>Botao</button>
              </div>
            )}
          </div>
        </Fragment>

CodePudding user response：

There are quite a few things wrong here:

First let's look at this line:

const newData = fetchapi((_, i) => i !== index);

Your fetchapi function doesn't take any arguments, so the function being passed in here will do nothing. Also, your fetchapi function is an async function, so this line would set newData to a Promise object. Also also, even if you added an await, since your fetchapi function doesn't return anything (since you've commented out the line that would return allData), this would set newData to be undefined.

Next let's look at how you're setting allData, by looking at where you're calling setAllData.

You call it in your removeElement function, which handles a button click.

But you also call it inside your callback for when the GET request comes back with data, inside your fetchapi function, which removeElement also calls.

So when you click that button:

• removeElement is called
• newData is set to a Promise object, since you're calling the async function fetchapi without an await
• setAllData(newData) sets it to be that Promise object, which means things like allData.city end up being undefined
• inside fetchapi, the GET request is made, and once it comes back, the callback is run, and setAllData(repsonse.data) sets it to be the same data again

If what you're trying to achieve is to delete an element from the backend data, then your button needs to send some kind of POST request to delete that element on the backend. Then you can fetch the data again, and now it won't include the delete element. Or you can just remove the element from your data on the frontend, if you don't care about any other possible updates to the dataset.

Or if what you're trying to achieve is just to fetch the backend data once, and then delete elements on the frontend (without modifying the backend data), when your button handler should only be modifying your component's allData state, and not calling fetchapi at all.

CodePudding user response：

To make the data remain empty after you press the remove button, you can update your removeElement function to set the value of allData to an empty object or an empty array, depending on what you want the data to be.

to explain this with code, here is an example of how you can update the removeElement function to set the value of allData to an empty object:

const removeElement = () => {
  setAllData({});
};

Also, here's an example of how you can update the removeElement function to set the value of allData to an empty array:

Copy code
const removeElement = () => {
  setAllData([]);
};

With either of these updates, when you press the remove button, the value of allData will be set to an empty object or an empty array, which should prevent the new data from appearing.