Reactjs 中的 Map function 將添加對象放入數組中

Question

我正在嘗試像終端一樣依次擁有一組輸入字段。

Page組件看起來像這樣

import React, { Component } from "react";
import NewLine from "./newLine";

export class Page extends Component {
    state = {
        numberOfLine: 0,
        lines: [{ value: "", id: 0, displayInputs: true}]
    };

    render() {
        return (
            <div className="container">
                <div className="terminal">
                    <p className="prompt">
                        Hey there! This is a pre rendered line.
                    </p>
                    {this.state.lines.map(l => (
                        <NewLine
                            key={this.state.numberOfLine}
                            handelWhatever={this.handelWhatever}
                            line={l}
                        ></NewLine>
                    ))}
                </div>
            </div>
        );
    }



    handelWhatever = (string_value, Tid) => {
        // console.log(string_value, Tid);
        // console.log(this.state.lines.filter(l => l.id != Tid));
        const num = this.state.numberOfLine + 1;
        this.setState({
            numberOfLine: this.state.lines.length + 1,
            lines: [
                ...this.state.lines.filter(line => line.id !== Tid),
                { value: string_value, id: Tid, displayInput: false },
                { value: "", id: num, displayInput: true }
            ]
        });
    };


export default Page;

我的NewLine組件看起來像這樣

import React, { Component } from "react";

export class NewLine extends Component {
    state = {
        id: this.props.line.id,
        value: this.props.line.value,
        displayInput: this.props.line.displayInput
    };
    render() {
        return (
            <React.Fragment>
                <p className=output>
                    {this.state.displayInput && (
                        <input
                            type="text"
                            className="here"
                            value={this.state.value}
                            onChange={this.handleChange}
                            onKeyDown={this.handelEnter}
                        />
                    )}
                    {this.state.value}
                </p>
            </React.Fragment>
        );
    }

    handleChange = event => {
        this.setState({ value: event.target.value });
    };

    handelEnter = event => {
        if (event.key === "Enter") {
            this.props.handelWhatever(event.target.value, this.state.id);
    }
    };

}

export default NewLine;

當我在輸入中輸入“某事”時，它應該創建一個NewLine組件並從前一個組件中刪除輸入，以便用戶可以在新渲染的行上鍵入，這就是我在 New Line state 中有 bool 的原因。

狀態更新完美，但是當我用戶輸入時，它需要所有以前的並呈現它們，即初始階段

> Hey there! This is a pre rendered line.
>

用戶輸入：'ls'

> Hey there! This is a pre rendered line.
> ls
>

用戶輸入：'cd'

> Hey there! This is a pre rendered line.
> ls
> ls
> cd

等等

我不知道發生了什么我嘗試打印父組件的 state 並且它在 map 中具有所需的行數，如果我在一個輸入之后執行 console.log，我將得到

{value: "ls", id: 1, displayInput: false}
{value: "ls", id: 1, displayInput: false}
{value: "", id: 2, displayInput: true}

控制台登錄 map 是這樣的

{this.state.lines.map(l => {
    console.log(l);
    return (
        <NewLine
        key={this.state.numberOfLine}
        handelWhatever={this.handelWhatever}
        line={l}
        ></NewLine>
      );
})}

Answer 1

您需要使用行的id作為每個NewLine組件的key 。

此外，您需要在NewLine組件中使用{this.props.line.value}而不是{this.state.value} 。

見下文

<React.Fragment>
            <p className=output>
                {this.state.displayInput && (
                    <input
                        type="text"
                        className="here"
                        value={this.state.value}
                        onChange={this.handleChange}
                        onKeyDown={this.handelEnter}
                    />
                )}
                {this.props.line.value} OR {this.state.value}
            </p>
        </React.Fragment>

請參閱此代碼筆。

在代碼筆中，我使用div而不是React.Fragment但這只是因為片段在代碼筆中引發了錯誤。

編輯

它實際上適用於this.state.value因此根據用例， this.props.line.value和this.state.value都有效。