React native 持续更新数组并在搜索筛选器栏中获取其值？

我会把我的头发从我的头上扯下来，因为我已经做了这么长时间了。我不明白为什么我的filterArray（它在我的控制台中正确更新，并根据searchUser函数的搜索进行过滤）正在工作，但当我在我的应用程序中将它输出到屏幕上时，它总是说它是空的？我希望它能像我的searchUser函数那样不断更新，但我不知道如何做到这一点。我应该在最后的大返回语句中调用searchUser吗？否则，我的filterArray将显示为空（这是我实际尝试输出的内容），响应只复制PDF名称的全名，不会在屏幕上更新，也不会根据我的搜索缩小我的列表（filterArray就是这样做的）。我认为这是因为我的useEffect函数只运行一次，当filterArray为空时会捕获它，只是将其保持为空，而不会重新初始化它

对不起，如果这是混乱，但我只是失去它。我也不希望MyComponent函数以组件的形式返回数组项，但是如果我更改它，我的代码告诉我不能以列表的形式返回文本。请帮忙

const searchUser = async (input) => {
  var filterArray = [];
  //nametoURL is a dictionary that stores a full list of pdf names from Firebase
  Object.keys(nameToURL).map((item) => {
    if (item.includes(input) && !filterArray.includes(item)) {
      filterArray.push(item);
      console.log("FOUND A MATCH");
      console.log("MATCH IS: ", filterArray);
    } else {
      console.log("NO MATCH");
    }
  });

  return { filterArray };
};

const Map = ({ navigation }) => {
  var [filterArray, setFilterArray] = useState([]);
  var [userInput, setInput] = useState([]);
  var [] = useState([]);
  var [result, setResult] = useState({});

  function MyComponent({ response }) {
    console.log(response);
    return <Text>{Object.values(response)}</Text>;
  }

  useEffect(() => {
    async function fetchData() {
      // You can await here
      const response = await searchUser(userInput);
      setResult(response);
      setFilterArray(filterArray);
      // ...
    }
    fetchData();
  }, []);

  return (
    <Container>
      <Header searchBar rounded>
        <Item>
          <Icon name="search" />
          <Input
            placeholder="Search For A Map (Case Sensitive)..."
            onChangeText={(text) => {
              searchUser(text), setInput(text);
            }}
            autoCapitalize="none"
            autoCorrect={false}
          />
        </Item>
      </Header>
      <ScrollView>
        <Text style={styles.titleStyle}> Camp Map </Text>
        <MyComponent response={result} />
      </ScrollView>
    </Container>
  );
};

const searchUser=async（输入）=>{
var filterArray=[]；
//nametoURL是一本字典，它存储来自Firebase的pdf名称的完整列表
Object.keys（nameToURL）.map（（项目）=>{
if（项目包括（输入）和&！过滤器阵列包括（项目））{
过滤器阵列推送（项目）；
log（“找到匹配项”）；
log（“匹配为：”，filterArray）；
}否则{
控制台日志（“不匹配”）；
}
});
返回{filterArray}；
};
常量映射=（{navigation}）=>{
var[filterArray，setFilterArray]=useState（[]）；
var[userInput，setInput]=useState（[]）；
var[]=useState（[]）；
var[result，setResult]=useState（{}）；
函数MyComponent（{response}）{
控制台日志（响应）；
返回{Object.values（response）}；
}
useffect（（）=>{
异步函数fetchData（）{
//你可以在这里等
const response=等待搜索用户（userInput）；
设置结果（响应）；
设置过滤器阵列（过滤器阵列）；
// ...
}
fetchData（）；
}, []);
返回(
{
搜索用户（文本），设置输入（文本）；
}}
autoCapitalize=“无”
自动更正={false}
/>
营地地图
);
};

问题在于，当文本更改时，您不能使用

searchUser

调用的结果设置

result

状态。您可以声明一个函数回调，并在那里这样做以获得更清晰的代码

function MyComponent({ response }) {
  console.log(response);
  return <Text>{Object.values(response)}</Text>;
}

const Map = ({ navigation }) => {
  var [filterArray, setFilterArray] = useState([]);
  var [userInput, setInput] = useState([]);
  var [] = useState([]);
  var [result, setResult] = useState({});

  const onChangeText = async (text) => {
    setInput(text);
    const response = await searchUser(text);
    setResult(response);
    // not sure when or were you are assigning filterArray though
    setFilterArray(filterArray);
  }
  
  useEffect(() => {
    async function fetchData() {
      // You can await here
      const response = await searchUser(userInput);
      setResult(response);
      setFilterArray(filterArray);
      // ...
    }
    fetchData();
  }, []);

  return (
    <Container>
      <Header searchBar rounded>
        <Item>
          <Icon name="search" />
          <Input
            placeholder="Search For A Map (Case Sensitive)..."
            onChangeText={onChangeText}
            autoCapitalize="none"
            autoCorrect={false}
          />
        </Item>
      </Header>
      <ScrollView>
        <Text style={styles.titleStyle}> Camp Map </Text>
        <MyComponent response={result} />
      </ScrollView>
    </Container>
  );
};

函数MyComponent（{response}）{
控制台日志（响应）；
返回{Object.values（response）}；
}
常量映射=（{navigation}）=>{
var[filterArray，setFilterArray]=useState（[]）；
var[userInput，setInput]=useState（[]）；
var[]=useState（[]）；
var[result，setResult]=useState（{}）；
const onChangeText=async（text）=>{
设置输入（文本）；
const response=等待搜索用户（文本）；
设置结果（响应）；
//但不确定您是什么时候或以前分配filterArray的
设置过滤器阵列（过滤器阵列）；
}
useffect（（）=>{
异步函数fetchData（）{
//你可以在这里等
const response=等待搜索用户（userInput）；
设置结果（响应）；
设置过滤器阵列（过滤器阵列）；
// ...
}
fetchData（）；
}, []);
返回(
营地地图
);
};

---

每次不建议用户类型时进行API调用，您可以检查此模式以取消对可用性的调用

响应仍然没有更新，即使filterArray来自我的searchUser函数。这是因为在我的useEffect中，它只更新一次响应，而不将其与searchUser的filterArray匹配。如何获取不断更新的数组？@UchihaAlchemist我更新了答案，因此我在上面代码中显示的searchUser函数中更新并设置了filterArray。由于某种原因，更新后的值不会传递到my Map（）函数。在您的解决方案中，文本没有在任何地方初始化，因此onChangeText不知道文本是什么。另外，API调用不是让我的代码从在线资源获取信息并通过它进行解析吗？我一开始就调用了一次API，不是吗？同样，我是一个初学者，所以我不确定这些事情。@Uchihaalchesman抱歉，

text

是处理程序收到的值，updated@UchihaAlchemist我以为您在

searchUser

函数中省略了调用firebase的代码。如果您已经在其他地方加载了所需的所有数据，那么就不需要异步加载或取消对调用的缓冲。