Question

所以我得到了一个看起来像这样的按钮列表我想要的功能是当您按下按钮时，其背景将变为另一种颜色。

const getUpdatedSelectedItemsArray = (selectedItems, id) => {
    selectedItems = []
    selectedItems.push(id);
    return selectedItems;
};

我使用此功能返回所选项目的列表。目前，我只返回一个项目，但将其制成数组，以便将来可以处理多个项目。在render函数中，我有这样的东西：

<View style={feed_back_page_styles.buttons_wrapper}>
        {
          feedbackButtons.map((item, i) => (
            <TouchableOpacity  style={this.state.selectedItems.includes(item.key)?feed_back_page_styles.pressedStyle:feed_back_page_styles.inputStyle}
                                onPress={()=>this.onButtonPress(item.key)}>
              <Text style={this.state.selectedItems.includes(item.key)?feed_back_page_styles.option_text_style_pressed:feed_back_page_styles.option_text_style}>{item.data}</Text>
          </TouchableOpacity>
          ))
        }
    </View>

feedbackButtons只是一个包含键和文本的数组。

onButtonPress方法如下：

    onButtonPress = (key) =>{
    updatedItems = getUpdatedSelectedItemsArray(this.state.selectedItems,key);
    this.setState({selectedItems:updatedItems},()=>console.log(this.state.selectedItems));
    console.log("Do smth else here");
  }

问题是视图不会在状态更改时更新。当我单击按钮时，状态会更新，但视图保持不变。

Answer 1

我认为这是错误的

const getUpdatedSelectedItemsArray = (selectedItems, id) => {
    selectedItems = []
    selectedItems.push(id);
    return selectedItems;
};

由于您从onButtonPress传递了this.state.selectedItems作为第一个参数，因此实际上它不会创建新数组，但是使用状态和状态的相同引用不应直接修改，因此请始终使用setState()。所以基本上你在做什么：

const getUpdatedSelectedItemsArray = (id) => {
    this.state.selectedItems = []
    this.state.selectedItems.push(id);
    return selectedItems;
};

这是完全错误的，可能是实际问题。相反，您可以做的是：

const getUpdatedSelectedItemsArray = (selectedItems=[], id) => {
    const items = [...selectedItems]
    items.push(id);
    return items;
};

然后：

    onButtonPress = (key) =>{
        const updatedItems = getUpdatedSelectedItemsArray(key); // since currently you want to keep only 1 item in the list
/* Incase more than 1 items, you can then use this
const updatedItems = getUpdatedSelectedItemsArray(this.state.selectedItems, key); 
*/   
        this.setState({selectedItems:updatedItems},()=>console.log(this.state.selectedItems));
        console.log("Do smth else here");
      }

希望这可以解决您的问题。

此外，如果您可以共享组件，则可以帮助您解决组件中的其他问题，例如使用PureComponent。

视图不更新状态更改

1 个答案: