Question

我有以下TypeScript代码：

user = User.objects.get(whatever_id)
student = Student.objects.create(user=user)
teacher = Teacher.objects.create(user=user)

我想实现我生成的列表元素一改变输入元素的值就会改变，所以我想 - 记住我从完美世界传递的参考 - 即使在我之后将列表元素放入数组中，它们应该在状态发生变化时立即更改。

猜猜是什么 - 他们没有。所以我想，这个值只是被复制到元素中。当然可以重新填充数组，但这似乎有些奇怪。

我哪里错了？我可能错过了一些非常明显的React / TypeScript / JavaScript基础知识，但我一直在撞墙而且我太盲目无法看到它。

提前致谢，

吨。

Answer 1

您希望每次状态更改时都调用initItemList吗？

如果是这种情况，请将componentWillUpdate添加到您的班级并让其致电initItemList

e.g。

componentWillUpdate() {
  this.initItemList();
}

Answer 2

Aaron的回答让我重回正轨。我现在有两个班： Foo.tsx

import * as React from 'react'
import * as ReactDOM from 'react-dom'

import { ListElement } from './ListElement';

interface FooProps {
    name: string
}

interface FooState {
    name: string
}

export class Foo extends React.Component<FooProps, FooState> {

    ITEMLIST: string[] = [];

    constructor(props) {
        super(props);
        this.state = {
            name: this.props.name
        }
        this.initItemList();
    }

    initItemList() {
        for (var i = 0; i < 5; i++) {
            this.ITEMLIST.push("'s item number " + i);
        }
    }

    handleChange(event) {
        this.setState({
            name: event.target.value
        })
    }

    render() {
        return (
            <div>
                <p>{this.state.name} owns these items:</p>
                {this.ITEMLIST.map((val) =>
                    <ListElement name={this.state.name + val} />
                )}
                <label>Name:
                    <input type="text" value={this.state.name} onChange={this.handleChange.bind(this)} />
                </label>
            </div>
        )
    }
}

ReactDOM.render
    (<Foo name='john' />, document.getElementById('content'));

和ListElement.tsx

import * as React from 'react';

interface ListElementProps {
    name: string
}

export class ListElement extends React.Component<ListElementProps, undefined> {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <li>{this.props.name}</li>
            </div>
        )
    }
}

这样，数组中的ListElements不会在每个渲染上实例化，仍然反映当前状态。

此致

和Thorsten

React / TypeScript：组件数组中的状态

2 个答案: