Javascript react native rendering按钮列表可以'；我想不出是什么'；这是不对的

我试图根据用户输入的输入创建一个按钮列表，输入类型是一个选项数组，如so

multipleOptions=['1'，'2'，'3']

，然后我们在每个选项中循环，显示一个按钮无法理解为什么它不工作这是我的代码：

import React, { useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

const InputButton = (multipleOptions, likertScale, onPress) => {
  const [options, setOptions] = useState([]);
  if (likertScale) {
    setOptions([...new Array(likertScale).keys()].map((i) => i));
  } else if (multipleOptions) setOptions(multipleOptions);

  return (
    <View style={styles.container}>
      {options ? (
        options.map((option, i) => (
          <View style={[styles.button]} key={`${i}`}>
            <TouchableOpacity onPress={() => onPress(option)}>
              <Text>{option}</Text>
            </TouchableOpacity>
          </View>
        ))
      ) : (
        <Text>no options</Text>
      )}
    </View>
  );
};

const App = () => {
  return (
    <View>
      <InputButton multipleOptions={['1', '2','3']} />
    </View>
  )
}
const styles = StyleSheet.create({})

export default App;

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
  },
  button: {
    margin: 3,
    flex: 1,
    backgroundColor: '#EEF6FA',
    minHeight: 72,
    borderRadius: 2,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
 

或者有时候是这样

options.map is not a function
TypeError: options.map is not a function
    at InputButton 

（欢迎进行各种优化） 提前谢谢各位

---

代码演示

这里有几个问题

第一，这会导致

过多的重新渲染。React限制渲染数量以防止无限循环。

是因为在每次渲染时调用

setOptions

，这会触发另一个渲染等。这是无限循环，因为在设置状态时，React会重新渲染组件。为了避免这种情况，必须使用

useffect

和正确的依赖项来包装表达式

React.useffect（（）=>{
if（likertScale）{
setOptions（[…新数组（likertScale）.keys（）].map（（i）=>i））；
}else if（多选项）{
设置选项（多选项）；
}，[multipleOptions，likertScale]）；

这样，只有当

multipleOptions

或

likertScale

更改时，此表达式才会运行。

另一个问题是，

InputButton

props参数是错误的：您忘记了对props的解构。它应该是

constinputbutton=（{multipleOptions，likertScale，onPress}）=>{/*body function*/}

最后，使用数组索引作为

键

属性是一种不好的做法，因为数组顺序可能会改变。您应该使用一个稳定的键，比如选项值

key={option}

---

这里有几个问题

第一个，这会导致

太多的重新渲染。React限制渲染的数量以防止无限循环。

是因为在每次渲染时调用

setOptions

，这会触发另一个渲染，等等。这是无限循环，因为在设置状态时，React会重新渲染组件。要避免这种情况，必须用

useffect

和正确的依赖项包装表达式

React.useffect（（）=>{
if（likertScale）{
setOptions（[…新数组（likertScale）.keys（）].map（（i）=>i））；
}else if（多选项）{
设置选项（多选项）；
}，[multipleOptions，likertScale]）；

这样，只有当

multipleOptions

或

likertScale

更改时，此表达式才会运行。

另一个问题是，

InputButton

props参数是错误的：您忘记了对props的解构。它应该是

constinputbutton=（{multipleOptions，likertScale，onPress}）=>{/*body function*/}

最后，使用数组索引作为

键

属性是一种不好的做法，因为数组顺序可能会改变。您应该使用一个稳定的键，比如选项值

key={option}

---

每次重新渲染时都会设置状态，这样就可以得到一个循环。因此有两个选项使用useEffect只设置一次状态或直接设置第一个状态。

constinputbutton=（{multipleOptions，likertScale，onPress}）=>{
const[options，setOptions]=useState（likertScale？[…新数组（likertScale）.keys（））.map（（i）=>i）：[…多重选项]；
返回(
{选项(
选项.map（（选项，i）=>(
onPress（选项）}>
{option}
))
) : (
别无选择
)}
);
};
导出默认输入按钮；

在每次重新渲染时都会设置状态，这样就可以得到一个循环。因此，有两个选项可以使用useEffect只设置一次状态，也可以直接设置第一个状态。

constinputbutton=（{multipleOptions，likertScale，onPress}）=>{
const[options，setOptions]=useState（likertScale？[…新数组（likertScale）.keys（））.map（（i）=>i）：[…多重选项]；
返回(
{选项(
选项.map（（选项，i）=>(
onPress（选项）}>
{option}
))
) : (
别无选择
)}
);
};
导出默认输入按钮；

options.map is not a function
TypeError: options.map is not a function
    at InputButton 

const InputButton = ({multipleOptions, likertScale, onPress}) => {
  const [options, setOptions] = useState(likertScale?[...new Array(likertScale).keys()].map((i) => i):[ ...multipleOptions]);

  return (
    <View style={styles.container}>
      {options ? (
        options.map((option, i) => (
          <View style={[styles.button]} key={`${i}`}>
            <TouchableOpacity onPress={() => onPress(option)}>
              <Text>{option}</Text>
            </TouchableOpacity>
          </View>
        ))
      ) : (
        <Text>no options</Text>
      )}
    </View>
  );
};

export default InputButton;