React新手求助：如何将react-table行数据传递至react-modal

我来帮你解决这个问题！你现在的核心问题是没有把react-table里当前行的数据传递给CompanyModal组件，还有几个小的语法和逻辑问题需要调整，一步步来：

1. 给表格里的编辑模态框传递当前行数据 #

在你的CompanyTable组件的columns定义里，Actions列的Cell渲染CompanyModal时，要把当前行的数据传进去。react-table的Cell props里，props.original就是当前行的完整数据对象，所以你需要把它作为company属性传给CompanyModal，同时指定isNew={false}（因为是编辑操作）：

{ 
  Header: "Actions", 
  Cell: props =>{
    return (
      <div className="actions-right">
        <CompanyModal isNew={false} company={props.original} />
      </div>
    )
  }, 
  sortable: false, 
  filterable: false
}

2. 监听模态框的props变化更新状态 #

你的CompanyModal现在只在componentDidMount里读取props.company，但编辑不同行时，props会变化，这时候componentDidMount不会再次执行，所以要添加componentDidUpdate来监听props的变化，更新组件内部状态：

componentDidUpdate(prevProps) {
  // 当props.company变化时，更新state
  if (prevProps.company !== this.props.company && this.props.company) {
    const { id, title, address, phoneNumber, email } = this.props.company
    this.setState({ id, title, address, phoneNumber, email });
  }
}

3. 修正表单输入框的value错误 #

你的表单里有几个value绑定错误：

• Name输入框里的this.state.Title要改成this.state.title（JS是大小写敏感的，要和state变量名一致）
• Address输入框里的this.state.company要改成this.state.address（明显笔误）
• 可以用|| ''简化空值判断，让代码更简洁

修正后的表单部分：

<Form onSubmit={this.props.company ? this.submitEdit : this.submitNew}>
  <FormGroup>
    <Label for="name">Name:</Label>
    <Input type="text" name="title" onChange={this.onChange} value={this.state.title || ''} />
  </FormGroup>
  <FormGroup>
    <Label for="address">Address:</Label>
    <Input type="text" name="address" onChange={this.onChange} value={this.state.address || ''} />
  </FormGroup>
  <FormGroup>
    <Label for="phoneNumber">Phone Number:</Label>
    <Input type="number" name="phoneNumber" onChange={this.onChange} value={this.state.phoneNumber || ''} />
  </FormGroup>
  <FormGroup>
    <Label for="email">Email:</Label>
    <Input type="email" name="email" onChange={this.onChange} value={this.state.email || ''} />
  </FormGroup>
  <Button type="submit">Submit</Button>
</Form>

4. 修正API请求的URL和表格字段拼写 #

• Axios请求的URL缺少协议（http/https），会被当成相对路径导致请求失败，要补上：

  // 新增公司
  Axios.post('https://localhost:44394/api/companies/Create', this.state)
  // 更新公司
  Axios.put(`https://localhost:44394/api/companies/update/${this.state.id}`, this.state)
  

• 表格里Address列的accessor写成了adress（少了一个d），要改成address和数据字段一致，不然地址列会显示为空：

  { Header: "Address", accessor: "address" },
  

最后，关键修改后的代码片段 #

CompanyModal核心修改

class CompanyModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: props.initialModalState || false, // 给默认值避免undefined
      id: '',
      title: '',
      address: '',
      phoneNumber : '',
      email: ''
    };
    this.toggle = this.toggle.bind(this);
  }

  componentDidMount() {
    if (this.props.company) {
      const { id, title, address, phoneNumber, email } = this.props.company
      this.setState({ id, title, address, phoneNumber, email});
    }
  }

  // 新增监听props变化的方法
  componentDidUpdate(prevProps) {
    if (prevProps.company !== this.props.company && this.props.company) {
      const { id, title, address, phoneNumber, email } = this.props.company
      this.setState({ id, title, address, phoneNumber, email });
    }
  }

  // ...其他方法不变

  render() {
    // ...其他渲染逻辑不变，只替换表单部分为修正后的代码
  }
}

CompanyTable的columns修改

const columns =[
  { Header: "Id", accessor: "id", show: false },
  { Header: "Name", accessor: "title" },
  { Header: "Address", accessor: "address" },
  { Header: "Phone Number", accessor: "phoneNumber" },
  { 
    Header: "Actions", 
    Cell: props =>{
      return (
        <div className="actions-right">
          <CompanyModal isNew={false} company={props.original} />
        </div>
      )
    }, 
    sortable: false, 
    filterable: false
  }
]

这样修改后，点击每行的编辑按钮，模态框就会加载当前行的数据，编辑后提交PUT请求就能正常更新服务器数据啦。

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