Question

所以我试图以这种方式在React中显示三个数组的内容：

array[one,two]
array2[1,2]
array3[hi, bye]

我想要的是什么：

一个 1 喜

2 2 再见

但我最终会以

结束

一个二 1 2 嗨再见

这是代码，我是usnig paint info来映射和显示。我尝试嵌套ul和li，但似乎不起作用......任何建议都会非常感激。

this.state = {
        paintBrand: ['Sherwin-Williams'],
        paintColor: ['Blue'],
        paintSheen: ['Satin']
    };

    this.handleSubmit = this.handleSubmit.bind(this);
    //Brads cool
}

handleSubmit(e) {
    e.preventDefault();
    var updateBrand = this.state.paintBrand;
    updateBrand.push(this.refs.brand.value);

    var updateColor = this.state.paintColor;
    updateColor.push(this.refs.color.value);

    var updateSheen = this.state.paintSheen;
    updateSheen.push(this.refs.sheen.value);

    this.setState({
        paintBrand: updateBrand,
        paintColor: updateColor,
        paintSheen: updateSheen
    });
}

render() {
    var paintBrandArr = this.state.paintBrand;
    paintBrandArr = paintBrandArr.map(brand =>
        <li key={brand}>
            {brand}
        </li>
    );
    var paintColorArr = this.state.paintColor;
    paintColorArr = paintColorArr.map(paint =>
        <li key={paint}>
            {paint}
        </li>
    );
    var paintSheenArr = this.state.paintSheen;
    paintSheenArr = paintSheenArr.map(sheen =>
        <li key={sheen}>
            {sheen}
        </li>
    );

    return (
        <div>
            <form className="form" onSubmit={this.handleSubmit}>
                <div className="row">
                    <div className="col-xs-4" />
                    <div className="col-xs-4">
                        <label htmlFor="brand">Paint Brand</label>
                        <div className="field">
                            <input
                                type="text"
                                name="brand"
                                className="form-control"
                                placeholder="Brand/Company"
                                ref="brand"
                                value={this.props.value}
                                onChange={this.props.onChange}
                            />
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-4" />
                    <div className="col-xs-4">
                        <label htmlFor="color">Color</label>
                        <div className="field">
                            <input
                                type="text"
                                name="brand"
                                className="form-control"
                                placeholder="Color"
                                ref="color"
                                value={this.props.value}
                                onChange={this.props.onChange}
                            />
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-4" />
                    <div className="col-xs-4">
                        <label htmlFor="brand">Sheen</label>
                        <div className="field">
                            <input
                                type="text"
                                name="brand"
                                className="form-control"
                                placeholder="Sheen"
                                ref="sheen"
                                value={this.props.value}
                                onChange={this.props.onChange}
                            />
                        </div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-12"> </div>
                    <input
                        className="btn btn-primary btn-lg"
                        type="submit"
                        value="Input"
                    />
                </div>
            </form>
            <div>
                <div>
                    <ul>
                        {paintBrandArr}
                        {paintColorArr}
                        {paintSheenArr}
                    </ul>
                </div>
            </div>
        </div>
    );
}

}

Answer 1

你可以做的是映射一个数组并通过像

这样的索引从所有三个数组中获取信息

var paintBrandArr = this.state.paintBrand;
    paintBrandArr = paintBrandArr.map((brand, index) =>
        <li key={brand}>
            {brand}
            {paintColorArr[index]}
            {paintSheenArr[index]}
        </li>
    );

然后在渲染

  <ul>
     {paintBrandArr}
  </ul>

在React中显示三个数组中的元素

1 个答案: