React Native中RCTView的accessibilityState属性更新类型转换错误求助

错误信息 #

Error while updating property 'accessibilityState' of a view managed by: RCTView 

null

Value for disable cannot be cast from ReadableNativeMap to Boolean.

触发代码 #

该错误在执行以下JavaScript逻辑时触发：

const onCheck = async () => {
  if (!itemQuestion?.answer && itemQuestion?.type !== 'sorting_choice') {
    Alert.alert('', t('learningScreen.quiz.checkAlert'));
    return;
  }

  setIsLoading(true);
  const itemTemp = new Object() as any;

  if (itemQuestion?.type === 'sorting_choice') {
    itemTemp.value = itemQuestion?.options.map((y: any) => y.value);
  } else if (itemQuestion?.answer) {
    if (itemQuestion?.type === 'true_or_false') {
      itemTemp.value = itemQuestion?.answer.value;
    } else if (itemQuestion?.type === 'fill_in_blanks') {
      itemTemp.value = itemQuestion?.answer;
    } else if (itemQuestion?.type === 'multi_choice') {
      itemTemp.value = itemQuestion?.answer.map((y: any) => y.value);
    } else {
      itemTemp.value = itemQuestion?.answer.map((y: any) => y.value);
    }
  }
  const param = {
    id: item?.id,
    question_id: itemQuestion?.id,
    answered: itemTemp?.value,
  };

  const checkAnswerPayload = await checkAnswer(param, token, navigation);
  if (checkAnswerPayload?.code === 'cannot_check_answer') {
    Alert.alert(checkAnswerPayload?.message || "");
  }
  console.log(checkAnswerPayload)
  const dataTemp = {
    id: itemQuestion?.id,
    result: checkAnswerPayload.result,
    explanation: checkAnswerPayload?.explanation || "",
  };
  itemCheck.push(dataTemp);
  setItemCheck((prevItemCheck) => [...prevItemCheck, dataTemp])

  setIsLoading(false);
};

原因分析 #

错误核心是：某个RCTView（比如按钮、输入框等基础组件）的disabled或accessibilityState.disabled属性，被传入了ReadableNativeMap类型的对象，而非预期的布尔值（true/false）。

结合代码逻辑推测：

• 执行onCheck后会更新isLoading、itemCheck状态，后续渲染时，某个UI组件的禁用状态绑定了错误的值；
• 大概率是checkAnswerPayload.result并非布尔类型，而是一个对象，你直接将其赋值给dataTemp.result，后续用这个字段控制组件禁用时触发类型转换错误；
• 也可能是itemCheck列表渲染时，组件禁用逻辑错误地返回了对象而非布尔值。

解决方法 #

1. 校验接口返回值类型
   先打印checkAnswerPayload.result的类型和值，确认是否为对象：

   console.log("result类型:", typeof checkAnswerPayload.result, "result值:", checkAnswerPayload.result);
   

   如果是对象，提取其中的布尔字段（比如checkAnswerPayload.result.isCorrect），替换dataTemp.result的赋值逻辑：

   const dataTemp = {
     id: itemQuestion?.id,
     result: checkAnswerPayload.result?.isCorrect ?? false, // 根据实际接口字段调整
     explanation: checkAnswerPayload?.explanation || "",
   };
   

2. 强制转换布尔值
   若无法确定接口返回类型，在赋值时强制转为布尔值：

   const dataTemp = {
     id: itemQuestion?.id,
     result: Boolean(checkAnswerPayload.result),
     explanation: checkAnswerPayload?.explanation || "",
   };
   

3. 排查所有禁用绑定逻辑
   找到代码中所有设置了disabled属性的组件，确保绑定的值是严格布尔类型。比如：

   <Button
     disabled={isLoading || (data.result === true)} // 明确布尔判断
     onPress={onCheck}
     title="检查答案"
   />
   

4. 调试定位问题组件
   在错误触发前添加日志，跟踪所有可能关联的状态值：

   // 在setIsLoading(false)前添加
   console.log("当前itemCheck:", itemCheck);
   console.log("dataTemp.result类型:", typeof dataTemp.result);
   

内容的提问来源于stack exchange，提问作者Muhammad Talha