React-Hooks：使用数组时状态的特殊行为

Question

当使用不同的技术将状态设置为数组时，我在 react-native 中得到不同的结果（在 reactjs 中可能会相似）。 代码实际上更长，但这里是摘要版本。

代码，即不工作

const [a,seta] = useState([]);
useEffect(()=>{
    callfun();
})
function callfun(){
       var newArray = [];
        for(i=0;i<5;i++){
           newArray.push(<Text>{i}</Text>)
      }
      seta(newArray);            //LINE 10
}
return(
<View>{a}</View>         // LINE 13
);

上面的代码在渲染时只显示数组的第一个元素。

---

将第 10 行替换为

seta(newArray);

将第 13 行替换为

<View>{[...newArray]}</View>

上面的这段代码只渲染数组中的第一个元素。

工作代码

将第 10 行替换为

seta([newArray]);

将第 13 行替换为

<View>{i[0]}</View>

上面的这段代码给出了正确的结果并渲染了状态数组中的所有元素。

---

将第 10 行替换为

seta([...newArray]);

将第 13 行替换为

<View>{i}</View>

上面的这段代码给出了正确的结果并渲染了状态数组中的所有元素。

我的猜测

seta(arrayValue) 有一些问题。我找不到任何不起作用的原因。

Answer 1

你需要使用map函数来显示所有元素

const [a,seta] = useState([]);
useEffect(()=>{
    callfun();
})
function callfun(){
       var newArray = [];
        for(i=0;i<5;i++){
           newArray.push(<Text key={i} >{i}</Text>)
      }
      seta(newArray);            //LINE 10
}
return(
<View>{a.map(el => el)}</View>         // LINE 13
);