时间戳

首页 > 解决方案 > 在 React Native 中的循环内更新状态变量

javascript - 在 React Native 中的循环内更新状态变量

问题描述

当我循环一个数组时，我得到了两个标题和两个子标题，例如props.tashlumExtraTitle

我想在一张底片中更新每个标题和子标题。

我从 textTitle["@TEUR"] 获得了两个标题，从textTitle [ "@SCHUM_HODSHI"] + "ש"ח"获得了两个子标题

let titleText = "";
  let subTitleText = "";
  
    props.tashlumExtraTitle.forEach((textTitle) => {
      titleText = textTitle["@TEUR"];
      console.log("title-->", titleText);
      subTitleText = textTitle["@SCHUM_HODSHI"] + "ש”ח";
      console.log("subtitle-->", subTitleText);
    });

底页：---

<RBSheet
        ref={helpSheet}
        closeOnDragDown={true}
        closeOnPressMask={true}
        height={hp(60)}
        customStyles={{
          wrapper: {
            backgroundColor: "rgba(52,52,52,0.8)",
          },
          draggableIcon: {
            backgroundColor: "#d3d6dc",
          },
          container: {
            borderRadius: 15,
          },
        }}
      >
        <Container>
          <HelpComponentContainer
            title={titleText}
            subTitle={subTitleText}
          />
        </Container>

当用户单击标题并获取底部表时，应在底部表上显示相同的标题和副标题。

当用户单击标题并获取底部表时，应在底部表上显示相同的标题和副标题。

我怎样才能获得这些更新的标题和子标题值？

标签： javascriptreactjsreact-native

解决方案

当值更新时，您需要重新渲染。因此屏幕重新渲染并显示更新的值。你可以用useState钩子做到这一点。所以这样做。

const [titleText,setTitleText] = React.useState("")
const [subTitleText,setSubTitleText]  = React.useState("")

// Runs every time props.tashlumList changes
React.useEffect(()=>{
 if (props.tashlumList) {
    props.tashlumExtraTitle.forEach((textTitle) => {
      setTitleText(textTitle["@TEUR"]);
      setSubTitleText(textTitle["@SCHUM_HODSHI"] + "ש”ח&quot;);
    });
  }
},[props.tashlumList])

阅读此（https://reactjs.org/docs/hooks-state.html）

推荐阅读