反应原生渲染按钮列表无法找出问题所在

Question

I'm trying to make a list of buttons based on the input from user input type is an array of options like so multipleOptions = ['1', '2', '3'] then we loop through each option to show a Button can't figure out why it's not working here's my code:

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',
  },
});
 

the error message is

Too many re-renders. React limits the number of renders to prevent an infinite loop.

or sometimes this

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

(All kind of optimisations are welcome) Thanks in Advance guys.

code demo https://snack.expo.io/@mansouriala/dac832

Answer 1

You have several issues here.

The first, which leads to Too many re-renders. React limits the number of renders to prevent an infinite loop. Too many re-renders. React limits the number of renders to prevent an infinite loop. is because you're calling setOptions at each render, which triggers another render, etc… This is infinite loop, because when you're setting a state, React re-renders the component. To avoid that, you have to wrap your expression with useEffect and the correct dependencies.

React.useEffect(() => {
  if (likertScale) {
    setOptions([...new Array(likertScale).keys()].map((i) => i));
  } else if (multipleOptions) {
    setOptions(multipleOptions);
  }, [multipleOptions, likertScale]);

This way, this expression would only run when multipleOptions or likertScale change. https://reactjs.org/docs/hooks-reference.html#useeffect

The other problem is that InputButton props argument is wrong: you forgot the props destructuring. It should be const InputButton = ({ multipleOptions, likertScale, onPress }) => { /* body function */ } .

Finally, it's a bad practice to use an array index as a key prop, because array order could change. You should use a stable key, like the option value key={option} .

https://reactjs.org/docs/lists-and-keys.html#keys

Answer 2

You put set state in every re-render so you get a loop. So you have two options use useEffect to just set state one time or set the first state directly. https://snack.expo.io/ZvLQM9FEF

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;