reactjs 当我删除数据时，一个新的数据出现了,我如何使它保持为空？

xe55xuns 于 2022-12-22 发布在 React

关注(0)|答案(2)|浏览(181)

我创建了一个获取数据并将其放置在字段中的按钮，我还创建了一个删除字段中所有数据的删除按钮，但当我按下删除按钮时，它工作，但它会自动添加一个新的（这也是我的任务的一部分，但不是那样）。如果有人能帮助我如何使这些字段保持为空，将不胜感激。

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>

reactjs

来源：https://stackoverflow.com/questions/74882727/when-i-remove-the-data-a-new-one-appears-how-can-i-make-it-so-it-stays-empty

2条答案

按热度按时间

jexiocij1#

这里有不少地方是错的：
首先让我们看看这行：

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

你的fetchapi函数不带任何参数，所以这里传入的函数什么都不做。另外，你的fetchapi函数是一个异步函数，所以这一行会将newData设置为Promise对象。另外，即使你添加了一个await，由于fetchapi函数不返回任何内容（因为您已经注解掉了返回allData的行），因此这将把newData设置为undefined。
接下来，让我们通过查看调用setAllData的位置来了解如何设置allData。
您可以在removeElement函数中调用它，该函数处理按钮单击。
但是，您也可以在fetchapi函数（removeElement也会调用该函数）内部的回调函数中调用它，以便在GET请求返回数据时调用它。
所以当你点击那个按钮的时候：

removeElement被调用
newData被设置为Promise对象，因为您调用异步函数fetchapi时没有使用await
setAllData(newData)将其设置为Promise对象，这意味着像allData.city这样的对象最终将成为undefined
在fetchapi内部，发出GET请求，一旦请求返回，就运行回调，setAllData(repsonse.data)再次将其设置为相同的数据

如果你想从后端数据中删除一个元素，那么你的按钮需要发送某种POST请求来在后端删除这个元素，然后你可以再次获取数据，现在它不会包含删除元素，或者你可以直接从前端数据中删除这个元素，如果你不关心数据集的任何其他可能的更新的话。
或者，如果您尝试实现的只是获取一次后端数据，然后删除前端上的元素（不修改后端数据），此时您的按钮处理程序应该只修改组件的allData状态，而根本不调用fetchapi。

赞(0）回复(0）举报 2022-12-22

lokaqttq2#

要使数据在按下remove按钮后保持为空，可以更新removeElement函数，将allData的值设置为空对象或空数组，具体取决于您希望数据是什么。
为了用代码解释这一点，下面是一个示例，说明如何更新removeElement函数以将allData的值设置为空对象：

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

另外，下面的示例说明了如何更新removeElement函数以将allData的值设置为空数组：

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

使用这两种更新中的任何一种，当您按下删除按钮时，allData的值都会被设置为空对象或空数组，这应该会阻止新数据出现。

赞(0）回复(0）举报 2022-12-22

我来回答

reactjs 当我删除数据时，一个新的数据出现了,我如何使它保持为空？

2条答案

相关问题

热门标签

最新问答