React组件传递sentStatus prop失败，ReadOnlyRow无法读取该属性求助

你当前把sentStatus作为TextForm的内部私有状态，React是单向数据流，父组件ReadOnlyRow默认无法直接读取子组件的内部状态，必须通过状态提升+回调的方式实现状态共享。同时你每个联系人需要独立的发送状态，需要把状态和联系人数据绑定存储。

1. 给联系人数据增加发送状态字段 #

调整App组件中contacts的初始化逻辑，给每个联系人默认加sentStatus标识，不需要修改原mock数据：

// 把App里原来的contacts初始化改成下面的代码
const [contacts, setContacts] = useState(data.map(item => ({...item, sentStatus: false})))

2. App中新增更新联系人发送状态的方法 #

在App组件内添加状态更新函数，再通过props把函数和对应联系人的sentStatus传给ReadOnlyRow：

// 放到App组件内部其他函数后面即可
const updateContactSentStatus = (contactId, newStatus) => {
  setContacts(prev => prev.map(contact => {
    if(contact.id === contactId) return {...contact, sentStatus: newStatus}
    return contact
  }))
}

修改App内渲染ReadOnlyRow的代码，传递新的props：

<ReadOnlyRow
  contact={contacto}
  handleEditClick={handleEditClick}
  handleDeleteClick={handleDeleteClick}
  messageSent={messageSent}
  // 新增两个props
  sentStatus={contacto.sentStatus}
  updateSentStatus={updateContactSentStatus}
/>

3. ReadOnlyRow组件透传props给TextForm #

修改ReadOnlyRow里渲染TextForm的代码，把状态更新方法和当前联系人的发送状态往下传：

<TextForm 
  contact={contact}
  sentStatus={sentStatus}
  updateSentStatus={updateSentStatus}
/>

现在ReadOnlyRow已经可以直接用sentStatus渲染提示文本了，比如：

<td>{sentStatus ? '已发送' : '未发送'}</td>

4. 改写TextForm组件逻辑 #

移除TextForm内部的sentStatus状态，改用props传入的状态，点击发送时调用上层的更新方法即可，同时修复原代码里状态异步更新导致的判断错误：

import React, { useState } from "react";

// 修改props接收
const TextForm = ({ contact, sentStatus, updateSentStatus }) => {
  const [sendTextText, setSendTextText] = useState("N/A")

  function sendText () {
    let phoneNumber = 1 + contact.phoneNumber
    fetch(`http://localhost:4000/send-text?recipient=${phoneNumber}&textmessage=Dear ${contact.fullName}, Your liscnese is set to expre on 9/21`)
    .catch(err => console.error(err))
    // 直接计算新状态，避免setState异步导致的取值错误
    const newStatus = !sentStatus
    updateSentStatus(contact.id, newStatus)
    
    if (newStatus === true){
      setSendTextText('good')
    } else {
      setSendTextText('bad')
    }
  }

  return (
    <div>
    <button onClick={sendText}>Send</button>
    <h1>{contact.phoneNumber}</h1>
    </div>
  );
};

export default TextForm;

修改完成后，所有组件都可以拿到对应联系人的发送状态，实现状态同步更新。

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