在 React Native 中使用 useState AND map() 刷新容器/屏幕答案

【问题标题】：Refresh Container/Screen with useState AND map() in React Native在 React Native 中使用 useState AND map() 刷新容器/屏幕
【发布时间】：2020-11-24 14:32:03
【问题描述】：

在我的应用程序中，我使用useState从API接收到更新的数据后，但这并没有反映在屏幕上的信息上，我需要返回和前进来更改信息。

当我点击按钮时，我保存了信息，返回时我需要更新任务已经完成，显示“OK”，但这并没有更新，即使“schedules”变量是正确的.

我哪里错了？我需要做什么才能“返回”并再次运行？

非常感谢！

import React, { useState, useEffect, useCallback } from "react";
...

const Pdvs = () => {
  const [scheduletasks, setScheduletasks] = useState([]);
...

onSave = async (id) => {.....
 const responseTask = await api.post("/schedules/fulldetails",{id});
      setScheduletasks(responseTask.data);
...

return (
    <Container>
        {scheduletasks.map((keys) => (
              {keys.done ? "OK"
              ) : ""}
        <Button title="Done"
                onPress={() =>
                  handleSave(keys.id)
                }
              />

【问题讨论】：

好像map回调中的返回值不对。您实际上是在返回 {"string"}。

标签： react-native use-state

【解决方案1】：

您的代码有些损坏，尤其是在 return() 中。请修改它以获得更好的帮助。

【讨论】：

【解决方案2】：

对不起，我只放了一段代码，用来过滤哪里没有问题。下面是更完整的代码：

我的“onSubmit”应该是你更新 useState 变量的地方

最大的问题在于 Return，变量 {keys.done} 正是我想要的！ :) 非常感谢

 onSubmit = async (inputText) => {
    try {
      const { schedule_id, product_id, task_id } = scheduletasksResult;
      const gpsPosition = await getLocationAsync();

      const response = await api.post(`/scheduletasks/add`, {
        schedule_id,
        product_id,
        task_id,
        result: inputText,
        gpsPosition,
      });

      if (response.status === 200) {
        setScheduletasksID(response.data.id);
      } else {
        setScheduletasksID(0);
      }
      return response.data.id;
    } catch (error) {
      console.log(error.response.data);
    }
  };

useEffect(() => {
    async function loadPdvs() {
      setCompany_id(company_id[1]);

      const response = await api.post("/schedules", {
        company_id: company_id[1],
        id,
      });
      setSchedules(response.data[0]);

      const responseTask = await api.post("/schedules/fulldetails", {
        company_id: company_id[1],
        id,
      });
      setScheduletasks(responseTask.data);
    }
    loadPdvs();
  }, []);

return (
    <Container>
      <RouteTitle>{schedules.tradeName}</RouteTitle>
      <ScrollView>
        {scheduletasks.map((keys) => (
          <RoutesContainer key={keys.task_id}>
            <RouteDetail>
              {keys.task_name}
              {keys.done ? (
                <FontAwesomeIcon
                  icon={faCheckCircle}
                />
              ) : null}
            </RouteDetail>
            {keys.textRequired ? (
              <Button
                title="Observações"
                onPress={() =>
                  showDialog(keys.schedule_id, keys.product_id, keys.task_id)
                }
              />
            ) : null}
          </RoutesContainer>
        ))}
      </ScrollView>
    </Container>
  );

【讨论】：