Question

跳到底部查看问题的样子！

onInputChange(e){
    this.setState({
        search : e.target.value
    });
}

onSearchSubmit(e){
    e.preventDefault();
    /* Going to dispatch the action */
    this.props.addThing(this.state.search);
    // this.setState({ search : '' })
}

renderThing(thing, index){
    debugger;
    return <div key={index}>{thing}</div>
}

render() {
    return (
        <div>
            <input value={this.state.search} onChange={this.onInputChange.bind(this)} />
            <button onClick={this.onSearchSubmit.bind(this)} type="button" className="btn btn-primary">Search</button>
            <h1>things</h1>
            {this.props.things.map(this.renderThing)}
        </div>
    );
}

另外，我有这条线，但我在网上看到的每个来源都没有给出明确的答案。有人说这没有必要，或者他们说这是告诉React什么数据类型是道具。我想将things的状态存储在一个数组中...所以当有人添加东西时，它只会创建一个新添加状态的新数组。

ThingIndex.propTypes = {
    things: PropTypes.array.isRequired
};

这是我的行动......

export const ADD_THING = 'ADD_THING';

export function addThing(thing){
    return {
        type: ADD_THING,
        payload: thing
    }
};

最后但并非最不重要的是，我的减速机......

import { ADD_THING } from '../actions/index';

export default function(state = [], action) {
    switch(action.type){
        case ADD_THING:
        console.log(action.payload)
            return [...state, 
                // thing: action.payload };
                Object.assign({}, action.payload)
            ];
        default:
            return state;
    }
}

这是我感到困惑和迷失的地方。 当我运行应用程序时，我输入＆＃34; HEY＆＃34;在搜索栏中点击搜索，调试器弹出安慰HEY（来自减速器）。

然后我输入thing，然后说：

> thing
< Object {0: "H", 1: "E", 2: "Y"}

我说没关系，至少道具正在接收状态... 但当我输入

> this.props
< Uncaught TypeError: Cannot read property 'props' of undefined(…)

现在我完全迷失了，并且无法理解React-Redux。

然后当我继续执行脚本时......它说

< Objects are not valid as a React child (found: object with keys 
{0, 1, 2}). If you meant to render a collection of children, use an array
 instead or wrap the object using createFragment(object) from the React
 add-ons. Check the render method of `ThingIndex`.

您将非常感谢您的帮助，我只是不知道该向谁求助！我观看了很多YouTube视频，中型文章，idk ......

不确定为什么React返回一个对象而不是数组

0 个答案: