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
);