Обновление нескольких состояний в React Native (увеличение счетчика для каждого компонента отдельно) - PullRequest
Новая
       96

Обновление нескольких состояний в React Native (увеличение счетчика для каждого компонента отдельно)

0 голосов
/ 04 мая 2020

Я нашел несколько похожих вопросов по этой теме c, но обычно они касаются React, а не React Native специально, и я нахожу его немного сложным чтобы перевести их как очень новое для обоих, пришедшее из фона Android / Java. У меня есть компонент, который содержит значок плюс и минус, чтобы увеличить / уменьшить их счетчик. Однако этот компонент используется несколько раз, и я не хочу, чтобы итоги и setTotal были для каждого экземпляра этого компонента, чтобы каждый мог обновлять свой итог независимо от других компонентов. В настоящий момент все они обновляются, когда я нажимаю на любой знак плюс / минус. Я использую крючки . 

const [total, setTotal] = useState(0)

const increase = () => {
    setTotal(total + 1)
}

const decrease = () => {
    setTotal(total - 1)
}

... 

            <Reportable
                title={'First'}
                decrease={decrease}
                increase={increase}
                total={total}
                onPress={handleChange}
            />
            <Reportable
                title={'Second'}
                decrease={decrease}
                increase={increase}
                total={total}
            />

Большое спасибо.

Ответы [ 2 ]

2 голосов
/ 04 мая 2020

Проблема в том, что вы передаете обоим компонентам одно и то же состояние (всего). Таким образом, не имеет значения, кто его увеличивал или уменьшал ... они будут делиться значениями, потому что оба используют одно и то же состояние.

Если каждый компонент должен знать, сколько раз он был увеличен, вы должны создать состояние для самого компонента следующим образом: 

import React from 'react';
import { View, Button } from 'react-native';

export default function Reportable() {
  const [total, setTotal] = useState(0)

  const increase = () => {
    setTotal(total + 1)
  }

  const decrease = () => {
    setTotal(total - 1)
  }

  return (
    <View>
      <Button onPress={increase} >Increment</Button>
      <Button onPress={decrease} >Decrement</Button>
    </View>
  );
}

Теперь импортируйте Reportable в приложение. js вот так: 

import React from 'react';
import { View } from 'react-native';

import Reportable from './Reportable';

export default function App () {
  return (
    <View>

      {/* This is the first Reportable */}
      <Reportable />

      {/* This is the second Reportable */}
      <Reportable />

    </View>
  );
}

Теперь, если вам нужно получить каждый счет в приложении. js дает нам более подробную информацию о том, что вы пытаетесь реализовать, чтобы мы могли найти решение, соответствующее вашей проблеме.

0 голосов
/ 05 мая 2020

Согласно ответу @ edilsomm217, это пример того, что у меня сработало. 

import React from 'react';
import { View, Button } from 'react-native';

export default function Reportable() {
  const [total, setTotal] = useState(0)

  const increase = () => {
    setTotal(total + 1)
    props.increase()
  }

  const decrease = () => {
    setTotal(total - 1)
    props.decrease()
  }

  return (
    <View>
      <Button onPress={increase} >Increment</Button>
      <Button onPress={decrease} >Decrement</Button>
    </View>
  );
}

Теперь импортируйте Reportable в приложение. js примерно так: 

import React from 'react';
import { View } from 'react-native';

import Reportable from './Reportable';

export default function App () {
  return (
    <View>

      {/* This is the first Reportable */}
      <Reportable 
       increase={increase}
       decrease={decrease}
       />

      {/* This is the second Reportable */}
      <Reportable
       increase={increase}
       decrease={decrease}
      />

    </View>
  );
}

Таким образом, я могу обновлять итоговое значение по отдельности, а также получать сумму, объединенную для всех элементов вместе, когда выполняете что-то вроде <Text>{total}</Text> в файле Reportable.js или App.js соответственно.

...