javascript - 状态更改时 View 未更新

Question

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

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

我使用此函数返回所选项目的列表。目前我只返回一项，但我将其设置为一个数组，以便将来可以处理多个项目。 在渲染函数中我有这样的东西:

<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");
  }

问题是 View 不会随着状态更改而更新。当我单击按钮时，状态会更新，但 View 保持不变。

Answer 1

我认为这是错误的

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

由于您将 this.state.selectedItems 作为 onButtonPress 中的第一个参数传递，实际上它并没有创建新数组，但使用相同的状态引用和状态不应直接修改，始终使用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)，它会有所帮助。