React - 在创建JSX组件阵列时，对象无效作为React子项

我将旧项目React.createComponent中的项目转换为新的ES6类定义。我有以下部件：React - 在创建JSX组件阵列时，对象无效作为React子项

class AnswerFrame extends React.Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     var props = this.props; 
     var selectedNumbers = props.selectedNumbers.map(function (i) { 
      return (
       <span onClick={props.unselectNumber.bind(null, i)}> 
        {i} 
       </span> 
      ) 
     }); 

     return (
      <div id="answer-frame"> 
       <div className="well"> 
        {selectedNumbers} 
       </div> 
      </div> 
     ); 
    } 
};

的想法是定义一个数组，selectedNumbers这是跨距，每个具有一个onclick事件的阵列。这些然后被渲染。

此代码工作正常转换为ES6之前，但现在是给我下面的错误：

Error: Objects are not valid as a React child 
(found: object with keys {dispatchConfig, _targetInst, nativeEvent, type, target, currentTarget, eventPhase, bubbles, cancelable, timeStamp, defaultPrevented, isTrusted, view, detail, screenX, screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, button, buttons, relatedTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchInstances}). 
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 `AnswerFrame`.

这是为什么不工作了？

来源

2017-04-26 Alex Logan

什么该数组包含，其数组''数组' r/string'还是'object'数组？你能显示'console.log（this.props.selectedNumbers）'的结果吗？ –

我觉得这个消息是关于'this.props.selectedNumbers'的内容。你确定有数字吗？ –

也许缺少span元素中的'key'属性会导致这个问题？ –

是的，原来问题出在props.selectedNumbers。试图找出在使用ES6时绑定this的方式中的更改，我从代码中其他位置的绑定中删除了空值。

此：

numbers.push(
    <div className={className} onClick={selectNumber.bind(i)}> 
     {i} 
    </div> 
);

应该已经

numbers.push(
    <div className={className} onClick={selectNumber.bind(null,i)}> 
     {i} 
    </div> 
);

所以props.selectedNumbers是导致问题的对象。

来源

2017-04-26 15:46:05

绑定在反应道具是不好的做法（https://daveceddia.com/avoid-bind-when-passing-props/），考虑做selectNumber高阶函数：

const selectNumber = (i) =>() => { 
    // your original function code here 
    doWhateverWith(i); 
}

和设置的onClick到：

来源

2017-04-26 15:56:58

使用这种方法，你将如何在不同的类中重用该函数？目前，我在父组件中定义了'selectNumber'并将其传递给子组件。 –

@AlexLogan要在一个动作中选择Number，你可以在你的子函数中像这样调用它：'selectNumber（i）（）'或者将它传递给'（i）=> selectNumber（i）（）' –

虽然定义了selectNumber，但是在这种情况下，将'clickHandler'函数定义为'（i）=>（）=> selectNumber（i）'并执行'onClick = {clickHandler（i）} ' –

我知道，这只是另一种方式做同样的事情，但...

members.push(
    <div className={className} onClick={() => {selectedNumber(i);}}> 
     {i} 
    </div> 
);

来源

2017-04-26 16:09:20

React - 在创建JSX组件阵列时，对象无效作为React子项

回答

相关问题