如何在组件之间设置数据传输？

Question

我需要将filterArray数据从组件TableGenerator传输到组件Content。它们都是App.js的子组件

我试图将组件Content.js中的数据传输到组件TableGenerator.js，它们都是App.js的子组件。你可以看到我在这里做了什么：

class App extends Component {

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

    render() {
        return (
            <div className="App">
                <Header/>
                <br></br>
                <Content updateData={this.updateData}/>
                <br></br>
                <TableGenerator data={this.state.filterArray}/>
            </div>
        );
    }

---

function TableGenerator() {

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

    return (
        <Paper style={{maxWidth: 936, marginLeft: '250px'}}>
            <Table>
                <TableHead>
                    <TableRow>
                        {Object.keys(allUsers[0]).map((TableRow, i) => (
                            <TableCell key={i} align="center">{TableRow.split("_").join(" ")}</TableCell>
                        ))}
                    </TableRow>
                </TableHead>
                <p>Props: {this.props.filterArray}</p>
                <TableBody>
                    {allUsers.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);
        // initial state
        this.state = {
            textInput: '',
            filterArray: []

        }
    }

    clear = () => {
        // return the state to initial
        this.setState({
            textInput: ''
        })
    }

    parseInput = () => {
        let tempArray = this.state.textInput.split(" ");// `convert string into array`
        this.state.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>
        );
    }

Answer 1

两个错误（1）Content.js中的parseInput（），update state using setState()（2）您的道具名称是data中的TableGenerator，但是您正在访问this.props.filterArray，它应该是this.props.data 我根据你的代码创建了一个sandbox。它正在将数据从Content.js传递给TableGenerator.js。

 parseInput = () => {
    let tempArray = this.state.textInput.split(" "); // `convert string into array`
    let filterArray = tempArray.filter(word => word.endsWith("*"));
    this.setState({ filterArray });
  };