Reactjs 在React中管理列表中的输入

我从服务器调用一个GET，这个请求返回一个由N个对象组成的数组。然后在此数组上生成一个列表，使用以下方法：

render() {
        return (
            <List
                dataSource={this.props.images}
                renderItem={image => (
                    <List.Item actions={
                        [
                            <Icon key={"1"+image.Id.toString()} onClick={(e) => this.actionClick('RUN',image.Id, image.RepoTags[0].replace(/[^a-zA-Z0-9]/g,'_'), e)}
                                  className="icon" type="caret-right" />,
                            <Popconfirm placement="topRight" title="Are you sure delete this image?"
                                        onConfirm={(e) => this.actionClick('REMOVE_IMAGE',image.Id, e)} okText="Yes" cancelText="No">
                                <Icon key="4" className="icon" type="close" />
                            </Popconfirm>
                        ]
                    }>
                        <List.Item.Meta
                            title={image.RepoTags[0]}
                            description={image.Labels ? image.Labels.maintainer : ''}
                        </List.Item.Meta>
                            <InputGroup compact className={'inputGroup'}>
                                <Input style={{ width: '50%' }} placeholder={'inner port'} value={this.state.innerPort} onChange={evt => this.updateValue("innerPort",evt)}/>
                                <Input style={{ width: '50%' }} placeholder={'redirect'} value={this.state.redirectPort} onChange={evt => this.updateValue("redirectPort",evt)}/>
                            </InputGroup>

                    </List.Item>
                )}
            >
            </List>
        );
    }

这里的问题是，对于列表的每个列表项，I都有相同的值

---

如何使用多个列表项管理此问题？我想到了一个数组，但没有成功。

您是否尝试使用平面列表而不是列表，以便将项目索引传递给呈现的项目。

将输入更改为

<Input style={{ width: '50%' }} placeholder={'inner port'} value={this.state["innerPort"+image.id] } onChange={evt => this.updateValue("innerPort",image.Id,evt)}/>

---

这可能是一个很好的解决方案，我已经考虑过了，但是现在的问题是value={this.state.innerPort}我改为value={this.state.Image.Id.innerPort}，但是因为我没有定义，所以它是错误的。应该怎样？

<Input style={{ width: '50%' }} placeholder={'inner port'} value={this.state["innerPort"+image.id] } onChange={evt => this.updateValue("innerPort",image.Id,evt)}/>

updateValue(k,id,v) {
        console.log("key", k, "value", v);
        console.log(this.state);
        var myKey=k+id
        this.setState({
            [myKey]:v.target.value
        });
    }