React Native - 在另一个文件的数组中更改状态

Question

嘿所有人:)这是我在这里的第一篇文章，希望我正在做的一切正确！

我目前正在开展一个学校项目并使用反应原生技术几周。

我的问题：

我有文件data.js：

47° 59′ N 7° 50′ E

我的主屏幕包含其中两个Deckswipers（为了更清晰，我将在此处仅显示第一个的代码），用于比较两个图像： Homescreen - With two DeckSwiper

qf

我想设置状态＆＃34;检查＆＃34;在data.js中为true，每次用户向右滑动。

第三个屏幕呈现一个List组件，该组件应显示用户之前做出的决定。此列表基于＆＃34; check＆＃34; data.js.

Screen 3 - List of all the decisions

我试了将近三天，找不到任何好的解决方案！

您对如何实现这一目标有什么建议吗？

谢谢：）

Answer 1

我不确定这个DeckSwiper组件是如何工作的，但由于您要导入静态数据，如果您需要更改数据，则需要克隆它然后更改它。将数据克隆分配给状态变量然后将其提供给组件将反映组件的更改。

要更改阵列中特定对象的属性，还需要ID或类似的唯一标识符。

示例

import data from '../Data.js';

export default class SwipeCards2 extends Component {
  constructor(props) {
    super(props);
    // clone the static data to state
    this.state = {
      data: [...data]
    }
  }
  changingCheckFunction(obejctsUniqueId) {
    this.setState((prevState) => {
       // find the object's id
      const itemIndex = prevState.data.findIndex(x => x.id == obejctsUniqueId);
      // copy the item and assign the new checked value
      const newItem = Object.assign({}, prevState.data[itemIndex], { checked: !prevState.data[itemIndex]}); 
      // copy the previous data array
      const newData = [...prevState.data];
      // set the newItem to newData
      newData[itemIndex] = newItem;
      // return the new data value to set state
      return { data: newData };
    });
  }
  _onSwipeLeft() {
    this._deckSwiper1._root.swipeLeft();
    this._deckSwiper2._root.swipeRight();
  }

  _onSwipeRight() {
    this._deckSwiper2._root.swipeLeft();
    this._deckSwiper1._root.swipeRight();
  }
  render() {
    return (
      <Container style={{ backgroundColor: '#ffffff' }}>
        <View>
          <DeckSwiper
            ref={mr => (this._deckSwiper1 = mr)}
            dataSource={this.state.data}
            onSwipeRight={() => this._deckSwiper2._root.swipeLeft()}
            onSwipeLeft={() => this._deckSwiper2._root.swipeRight()}
            looping={true}
            renderEmpty={() => (
              <View style={{ alignSelf: 'center' }}>
                <Text>Das war´s!</Text>
              </View>
            )}
            renderItem={item => (
              <Card
                style={{
                  elevation: 3,
                  height: 335,
                  justifyContent: 'center',
                  width: Dimensions.get('window').width + 1,
                  marginLeft: -1,
                  marginTop: 0,
                }}>

                <TouchableWithoutFeedback onPress={() => this._onSwipeRight()}>

                  <CardItem cardBody style={{ alignItems: 'center' }}>
                    <Image
                      style={{
                        resizeMode: 'cover',
                        flex: 1,
                        height: 335,
                      }}
                      source={item.image}
                    />
                  </CardItem>
                </TouchableWithoutFeedback>

              </Card>
            )}
          />

        </View>
      </Container>
    );
  }
}