Question

我正在学习Redux。在同一个容器中，我想使用mapStateToProps和mapDispatchToProps。如果我将它们分成不同的容器，我可以使它无错误地工作，但是如果我尝试将它们放在同一容器中，由于某种原因它会产生以下错误：

"bundle.js:2296 Warning: flattenChildren(...): 
Encountered two children with the same key, `.$1`. 
Child keys must be unique; when two children share a key, 
only the first child will be used."

可以在同一个容器中同时使用mapStateToProps和mapDispatchToProps吗？一切正常，但我仍然在控制台上得到错误，并想弄清楚它究竟意味着什么。

这是我的容器。（我必须采取行动：fetchAstronaut和showNotification）：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchAstronaut } from '../actions/index';
import { showNotification } from '../actions/index';

class SearchBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: ''
        }
    }
    displaySearch(e) {
        this.setState({ text: e.target.value })
    }

    formSubmit(e) {
        e.preventDefault();
        this.props.fetchAstronaut(this.state.text);
        this.setState({ text: ''});
        this.props.showNotification();
    }

    render() {
        return (
            <div>
                <div>
                    <form onSubmit={(e) => this.formSubmit(e)}>
                        <input
                            value = { this.state.text }
                            onChange={(e) => this.displaySearch(e) }
                        />
                        <button type="submit">Search</button>
                    </form>
                </div>
                <div>
                    <h1>{this.props.notification}</h1>
                </div>
            </div>
        );
    }
}

function mapStateToProps({ notification }) {
    return { notification };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators( { fetchAstronaut, showNotification }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);

Answer 1

在同一个容器中同时使用mapStateToProps和mapDispatchToProps肯定是可以的，你看到的错误就在别处。

每当您传递组件的反应列表时，您应该为每个组件分配唯一的ID。例如，如果你有代码：

const Comp = (props) => {
 const l =[1,2,3,4]
 const lc = l.map((ix) => (<p>{ix}</p>))
 return (
  <div>{lc}</div>
 )
}

会给你类似于你的错误。要修复它，您应该将其更改为：

const lc = l.map((ix) => (<p key={ix}>{ix}</p>))

以便每个段落都有其唯一的密钥。

Answer 2

当然可以使用 mapStateToProps 和 mapDispatchToProps ，实际上它是值得推荐的。

至于警告，这是一个反应JSX警告：你在没有钥匙的同一级别包括2个div。它们必须有一个“关键”参数，它们必须不同。

render() {
    return (
        <div>
            <div key='1'>
                <form onSubmit={(e) => this.formSubmit(e)}>
                    <input
                        value = { this.state.text }
                        onChange={(e) => this.displaySearch(e) }
                    />
                    <button type="submit">Search</button>
                </form>
            </div>
            <div key='2'>
                <h1>{this.props.notification}</h1>
            </div>
        </div>
    );
}

在Redux中出错：＆＃34;遇到两个孩子，他们使用相同的密钥＆＃34;。如何解决此错误？

2 个答案: