Question

尝试在有序列表中显示道具时遇到问题。它仅显示初始值。当我添加到列表时，它没有更新。

这是源代码

TodoList.js

class ToDoList extends React.Component {

    render() {
        return (
            <div>
                {this.props.data.map(list => {
                    return (
                        <ol key={list.uuid} > <input type="checkbox"></input>{list.uuid}- {list.text}</ol>
                    );
                })}
            </div>
        );
    }
}

export default ToDoList;

Todo.js
let data = [{ uuid: 100, text: "TEST" }, { uuid: 101, text: "TEST" }];
let id = 0;

class Todo extends React.Component {
    handleAddItem = () => {
        id = id + 1;
        data.push({ uuid: id, text: this.refs.textInput.value });
        console.log(data);
    }

    render() {
        return (
            <div>
                <div>
                    <input type="text" ref="textInput"></input>
                    <button onClick={this.handleAddItem}>ADD TO LIST</button>
                </div>
                <ToDoList data={data} />
            </div>
        );
    }
}

export default Todo;

谢谢。

Answer 1

当我添加到列表中时，它尚未更新。

这是因为data是不是状态变量，并且不会引起重新渲染。

要修复，请改成状态。

class Todo extends React.Component {
  // make data and id a state variable
  state = {
    data: [{ uuid: 100, text: "TEST" }, { uuid: 101, text: "TEST" }],
    id: 0,
  }
  ...
}

然后将状态data传递到TodoList

<ToDoList data={this.state.data} />

更新状态：

切勿使用spread operator (...)来更改处理程序中的状态变量。

handleAddItem = () => {
  // update the state using this.setState()
  this.setState(prevState => ({
      id: prevState.id + 1,
      data: [
        ...prevState.data, // use spread operator
        { uuid: prevState.id + 1, text: this.refs.textInput.value }
      ]
    }),
    () => console.log(this.state.data) // pass 2nd arg to log state update
  );
}

Answer 2

您应该将state添加到ToDo组件中，并使用setSate()方法来更新state。然后ToDo组件和ToDoList组件将重新呈现。

let data = [{ uuid: 100, text: "TEST" }, { uuid: 101, text: "TEST" }];
let id = 0;

class Todo extends React.Component {
    state = {
        data
    }

    handleAddItem = () => {
        id = id + 1;
        this.setSate({
            data: [...this.state.data, { uuid: id, text: this.refs.textInput.value }]
        });
        console.log(this.state.data);
    }

    render() {
        return (
            <div>
                <div>
                    <input type="text" ref="textInput"></input>
                    <button onClick={this.handleAddItem}>ADD TO LIST</button>
                </div>
                <ToDoList data={this.state.data} />
            </div>
        );
    }
}

关于Component State有doucment。阅读以了解更多信息。

传递道具并在列表中显示的方法

2 个答案: