1

我正在学习 React Native，这是我在 Stack Overflow 上的第一篇文章。

我正在尝试重新渲染一个按钮以使其disabled属性从false变为truewhen onPress。

此按钮正在renderMessageImage从 react-native-gifted-chat 内部手动呈现。

我正在通过一个布尔值 in 执行此this.state操作，但是我看到日志上的状态值正在更新，但该按钮在视觉上保持不变，并且可以一次又一次地按下它而无需实际更改其disabled属性。

我在Chat.js班上有：

constructor(props) {
    super(props);
    this.state = {
        isButtonDisabled: false
    };
}

renderMessageImage然后，当消息具有图像时，我会从 Gifted Chat 调用以显示自定义消息设计：

renderMessageImage = (props) => {
      return (
      <View>
          <Button
            title="Disable Button"
            disabled={this.state.isButtonDisabled}
            onPress={() => this.disableButton(props.currentMessage.id)}
          />
      </View>)
}

这个自定义设计只是一个应该调用另一个方法然后禁用自身的按钮：

disableButton = async (message_id) => {
      console.log("Disabling message_id: " + message_id); //This shows the msg_id correctly where the button is
      console.log(this.state.isButtonDisabled); //This shows false
      this.setState(previousState => ({
          isButtonDisabled: true
        }));
      console.log(this.state.isButtonDisabled); //This shows true (should update button disabled property)
      return true;
}

对于我到目前为止测试的内容，我可以看到 state 的值isButtonDisabled正确地从falseto改变true，并且正如我所读到的，状态的改变应该使组件重新渲染，但不幸的是它不是那样工作的。

更深入的测试：

然后我前往GiftedChat.js源react-native-gifted-chat代码尝试调试一些代码，看看那里发生了什么。我发现，每当我按下自定义按钮时，都会调用 of 两次componentDidUpdate：GiftedChat.js

componentDidUpdate(prevProps = {}) {
    const { messages, text, inverted } = this.props;
    console.log(this.props !== prevProps); //This is called twice per button click
    if (this.props !== prevProps) {
        //this.setMessages(messages || []); //I changed this line for the line below to directly update state
        this.setState({ messages });
        console.log(this.props !== prevProps); //This is called once per button click (first of the two calls)
    }
    if (inverted === false &&
        messages &&
        prevProps.messages &&
        messages.length !== prevProps.messages.length) {
        setTimeout(() => this.scrollToBottom(false), 200);
    }
    if (text !== prevProps.text) {
        this.setTextFromProp(text);
    }
}

一旦所有这些检查完毕，我就会看到状态正在更新，并且GiftedChat.js每次按钮单击都会更新一次组件和消息，但是我的按钮renderMessageImage永远不会重新渲染以正确显示其新disabled值并实际上被禁用。

我完全不知道还有什么要测试的，所以我真的很感谢一些关于我做错了什么的帮助。

非常感谢您提前。

编辑： 在我的课堂部分renderMessageImage由 GiftedChat调用，然后只要消息有图像（例如），GiftedChat 就会调用。那部分工作正常，一切都被调用，只是按钮状态（）的重新渲染没有更新：Chat.jsrender()this.renderMessageImagethis.state.messages[i].image != undefineddisabled

  render() {
    return (
      <View style={{ flex: 1 }}>
        <GiftedChat
          messages={this.state.messages}
          onSend={this.sendMessage}
          user={this.user}
          placeholder={"Write a message..."}
          renderMessageImage={this.renderMessageImage}
        />
        <KeyboardAvoidingView behavior={'padding'} keyboardVerticalOffset={80}/>
      </View>
    );
  }
4

0 回答 0