React兄弟组件数据传递配置：Content向TableGenerator传filterArray

我帮你梳理了代码里几个关键问题，这些问题导致filterArray没法正确传递给TableGenerator，咱们一个个来解决：

1. App组件未初始化state #

你的App组件里直接使用this.state.filterArray，但没有在构造函数里初始化state，这会导致首次渲染时this.state是undefined，进而触发报错。

修复方式：给App组件添加初始state：

class App extends Component {
  constructor(props) {
    super(props);
    // 初始化state，默认filterArray为空数组
    this.state = {
      filterArray: []
    };
  }

  updateData = (value) => {
    this.setState({filterArray: value})
  }

  // ... 其余render代码不变
}

2. TableGenerator是函数组件，不能用this.props #

你写的TableGenerator是函数组件，函数组件的props是通过参数传入的，不是this.props。而且你也没有接收props参数，导致根本拿不到传入的data。

修复方式：接收props参数，并用它来处理数据：

// 接收props参数
function TableGenerator(props) {
  const allUsers = [
    {пользователь: "Александра"},
    {пользователь: "Шура"},
    {пользователь: "Настя"},
    {пользователь: "Ира"},
    {пользователь: "Ваня"},
    {пользователь: "Жора"},
    {пользователь: "Гриша"}
  ];

  // 根据传入的filterArray过滤用户数据（这里简单实现关键词匹配，可按需调整）
  const filteredUsers = props.data.length > 0 
    ? allUsers.filter(user => {
        const keywords = props.data.map(k => k.replace('*', ''));
        return keywords.some(keyword => user.пользователь.includes(keyword));
      })
    : allUsers;

  return (
    <Paper style={{maxWidth: 936, marginLeft: '250px'}}>
      <Table>
        <TableHead>
          <TableRow>
            {Object.keys(allUsers[0]).map((header, i) => (
              <TableCell key={i} align="center">{header.split("_").join(" ")}</TableCell>
            ))}
          </TableRow>
        </TableHead>
        {/* 现在可以正确显示props数据了 */}
        <p>当前过滤关键词: {props.data.join(', ') || '无'}</p>
        <TableBody>
          {/* 使用过滤后的filteredUsers渲染 */}
          {filteredUsers.map((user, i) => (
            <TableRow key={i}>
              {Object.values(user).map((v, j) => (
                <TableCell key={j} align="center">{v}</TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}

3. Content组件里错误修改state + 按钮点击事件错误 #

在parseInput方法里，你直接修改了this.state.filterArray，这违反了React的state更新规则——必须用setState来修改state，否则组件不会重新渲染。另外，Обучить按钮的onClick={this.parseInput()}会导致组件渲染时立即执行这个方法，而不是点击时执行，应该传递函数引用。

修复方式：

class Content extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      textInput: '',
      filterArray: []
    }
  }

  clear = () => {
    this.setState({ textInput: '', filterArray: [] })
  }

  parseInput = () => {
    let tempArray = this.state.textInput.split(" ");
    // 用setState修改filterArray，而不是直接赋值
    this.setState({
      filterArray: tempArray.filter(word => word.endsWith('*'))
    });
  }

  render() {
    return (
      <Paper style={{maxWidth: 936, marginLeft: '250px', overflow: 'hidden'}}>
        <AppBar position="static" color="default" elevation={0}>
          <Toolbar>
            <Grid container spacing={16} alignItems="center">
              <Grid item xs>
                {/* ... TextField代码不变 */}
              </Grid>
              <Grid item>
                {/* 去掉括号，传递函数引用 */}
                <Button variant="contained" color="primary" style={{background: 'linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)'}} onClick={this.parseInput} >
                  Обучить
                </Button>
                {/* ... 其余按钮代码不变 */}
              </Grid>
            </Grid>
          </Toolbar>
        </AppBar>
      </Paper>
    );
  }
}

4. 组件闭合问题 #

你的代码里App、TableGenerator、Content组件都没有正确闭合（缺少}或者}），这会导致语法错误，一定要确保每个类组件和函数组件都有正确的闭合标记。

完整修正后的代码示例 #

把上面的修改整合后，完整代码大概是这样：

import React, { Component } from 'react';
import { Paper, Table, TableHead, TableRow, TableCell, TableBody, AppBar, Toolbar, Grid, TextField, Button, Tooltip, IconButton } from '@material-ui/core';
import RefreshIcon from '@material-ui/icons/Refresh';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filterArray: []
    };
  }

  updateData = (value) => {
    this.setState({ filterArray: value });
  };

  render() {
    return (
      <div className="App">
        {/* 假设Header组件已定义 */}
        <Header />
        <br />
        <Content updateData={this.updateData} />
        <br />
        <TableGenerator data={this.state.filterArray} />
      </div>
    );
  }
}

function TableGenerator(props) {
  const allUsers = [
    { пользователь: "Александра" },
    { пользователь: "Шура" },
    { пользователь: "Настя" },
    { пользователь: "Ира" },
    { пользователь: "Ваня" },
    { пользователь: "Жора" },
    { пользователь: "Гриша" }
  ];

  // 简单的过滤逻辑：匹配关键词（去掉*）
  const filteredUsers = props.data.length > 0
    ? allUsers.filter(user => {
        const keywords = props.data.map(k => k.replace('*', ''));
        return keywords.some(keyword => user.пользователь.includes(keyword));
      })
    : allUsers;

  return (
    <Paper style={{ maxWidth: 936, marginLeft: '250px' }}>
      <Table>
        <TableHead>
          <TableRow>
            {Object.keys(allUsers[0]).map((header, i) => (
              <TableCell key={i} align="center">{header.split("_").join(" ")}</TableCell>
            ))}
          </TableRow>
        </TableHead>
        <p>当前过滤关键词: {props.data.join(', ') || '无'}</p>
        <TableBody>
          {filteredUsers.map((user, i) => (
            <TableRow key={i}>
              {Object.values(user).map((v, j) => (
                <TableCell key={j} align="center">{v}</TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}

class Content extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      textInput: '',
      filterArray: []
    };
  }

  clear = () => {
    this.setState({ textInput: '', filterArray: [] });
  };

  parseInput = () => {
    let tempArray = this.state.textInput.split(" ");
    this.setState({
      filterArray: tempArray.filter(word => word.endsWith('*'))
    });
  };

  render() {
    return (
      <Paper style={{ maxWidth: 936, marginLeft: '250px', overflow: 'hidden' }}>
        <AppBar position="static" color="default" elevation={0}>
          <Toolbar>
            <Grid container spacing={16} alignItems="center">
              <Grid item xs>
                <TextField
                  fullWidth
                  placeholder="Введите фразу которую нужно обучить"
                  id='textInput'
                  InputProps={{
                    disableUnderline: true,
                  }}
                  value={this.state.textInput}
                  onChange={(e) => { this.setState({ textInput: e.target.value }) }}
                />
              </Grid>
              <Grid item>
                <Button
                  variant="contained"
                  color="primary"
                  style={{ background: 'linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)' }}
                  onClick={this.parseInput}
                >
                  Обучить
                </Button>
                <Button
                  variant="contained"
                  color="primary"
                  style={{ background: 'linear-gradient(45deg, #00ACD3 30%, #00BE68 90%)' }}
                  onClick={() => { this.props.updateData(this.state.filterArray) }}
                >
                  Генерировать
                </Button>
                <Tooltip title="Сбросить">
                  <IconButton>
                    <RefreshIcon color="inherit" style={{ display: 'block' }} id='clearButton' onClick={this.clear} />
                  </IconButton>
                </Tooltip>
              </Grid>
            </Grid>
          </Toolbar>
        </AppBar>
      </Paper>
    );
  }
}

// 假设Header组件定义
function Header() {
  return <h1>Приложение</h1>;
}

export default App;

现在你可以测试一下：输入类似Шу* Наст*的文本，点击"Обучить"，然后点击"Генерировать"，TableGenerator就会显示匹配的用户了。

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