函数组件通过props与useState获取类子组件state的问题

核心思路 #

父组件传递setMailArray的写法本身没问题，问题出在子组件没有在状态变化时调用这个方法同步数据。类组件通过this.props获取父组件传过来的方法，只要在子组件state更新后调用该方法，就能把数据回传给父组件。

子组件修改示例 #

在子组件中添加状态同步逻辑，比如在更新items时调用父组件的setMailArray：

// children <<Chips>>
export default class Chips extends React.Component {
  state = {
    items: [''],
    value: '',
    error: null,
  };

  // 更新items并同步到父组件
  syncItemsToParent = (newItems) => {
    this.setState({ items: newItems }, () => {
      // 状态更新完成后，调用父组件的setMailArray
      this.props.setMailArray(newItems);
    });
  };

  // 示例：添加邮箱的处理逻辑
  handleAddItem = () => {
    const { value, items } = this.state;
    if (value && !items.includes(value)) {
      const updatedItems = [...items, value];
      this.syncItemsToParent(updatedItems);
      this.setState({ value: '' });
    }
  };

  render() {
    return (
      <div>
        <input
          value={this.state.value}
          onChange={(e) => this.setState({ value: e.target.value })}
          onKeyPress={(e) => e.key === 'Enter' && this.handleAddItem()}
        />
        <button onClick={this.handleAddItem}>添加</button>
        {/* 渲染已选的标签 */}
        {this.state.items.map((item, idx) => (
          <span key={idx} className="chip">{item}</span>
        ))}
      </div>
    );
  }
}

父组件验证 #

父组件的写法无需修改，可添加日志验证数据是否同步：

// parent
const [mailArray, setMailArray] = useState([]);

// 打印验证数据是否更新
console.log('同步后的邮箱列表:', mailArray);

return (
  <StyledInputBox>
    <Chips setMailArray={setMailArray} />
  </StyledInputBox>
);

排查要点 #

• 确认子组件中this.props.setMailArray确实被调用，可在syncItemsToParent方法中添加日志排查。
• 类组件必须通过setState修改状态，直接修改this.state不会触发更新，也无法同步到父组件。
• 若StyledInputBox是自定义组件，需确保它透传了子组件的props（比如没有过滤掉setMailArray）。

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