Как сопоставить массив в флажок для React Native [TypeScript]? - PullRequest
Новая
       17

Как сопоставить массив в флажок для React Native [TypeScript]?

0 голосов
/ 02 апреля 2020

Я новичок в React Native. В настоящее время я использую TypeScript для своего проекта React Native. Прямо сейчас у меня возникли трудности с отображением массива в флажок. Ниже мой json файл: 

{ 
   "stud_name": "Adam",
   "sex": "male",
   "attendance": false,
   "eligibility": false
}

Я хотел бы отобразить attendance и eligibility внутри флажка. Ниже приведен мой React Native код для этого флажка. 

export const StudentRegisterExam: React.FC<Props> = ({}) => {
  const StudentData = useContext(StudentStoreContext);

  const firstRender = useRef(true);
  useEffect(() => {
    if (firstRender.current) {
      firstRender.current = false;
      return;
    }
    if (response !== undefined) {
      if (response.status === 201 || response.status === 200) {
        StudentData.details = {
           name: response.data.name,
           sex: response.data.sex,
           eligibility: response.data.eligibility,
           attendance: response.data.attendance
       };
     }
   }
 }, [response]);

return (
      <View>
        <Text>{StudentData.response.name}</Text>
        <Text>{StudentData.response.sex}</Text>
        <CheckBox /> <- how should I write {StudentData.response.eligibility} into checkbox
        <CheckBox />
      </View>
 );

Заранее благодарю. Для StudentData я создал имя файла StudentStore.ts внутри папки моего магазина.

1 Ответ

2 голосов
/ 02 апреля 2020

Я не совсем понимаю вашу точку зрения. Отображение массива означает итерацию по каждому из его значений. Но, похоже, вы имеете в виду, как поместить данные в ваш -компонент?

Вопрос в том, как выглядит ваш компонент-флажок. Вы должны опубликовать исходный код этого ... или вы используете UI-библиотеку, такую ​​как react-elements.

В случае react-elements -Checkbox вы можете сделать это как this: 

const { response } = StudentData;
return (
      { Object.keys(response).map(item =>
      <View>
        <Text>{response[item].stud_name}</Text>
        <Text>{response[item].sex}</Text> 
        <CheckBox
          center
          title='{response[item].stud_name}'
         checked={response[item].eligibility}
        />

      </View>
      ) }
 );

Надежда, которая дает вам идею.

Подумайте, что вы искали, как выполнить al oop в вашем JSX, не так ли? Или это было как поместить параметры в Компонент?

Таким образом, вы можете выполнить его внутри {}, но вы можете использовать только выражения там ... никаких классических циклов if, for или while. Так что go с вызовами методов, такими как yourArr.forEach, yourArr.map или троичный оператор, в качестве замены условий if

...