Vi phạm bất biến: Các đối tượng không hợp lệ như một đứa trẻ React

Trong chức năng kết xuất của thành phần tôi có:

render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
    });
    return (
      <div>
        ...
                <ul>
                  {items}
                </ul>
         ...
      </div>
    );
  }

mọi thứ đều ổn, tuy nhiên khi nhấp vào <li>phần tử tôi nhận được lỗi sau:

Uncaught Error: Vi phạm bất biến: Các đối tượng không hợp lệ như là một đứa trẻ React (đã tìm thấy: đối tượng có các khóa {ClarkConfig, ftimeMarker, localEvent, target, currentTarget, type, eventPhase, bubble, hủy bỏ, timeStamp, defaultPrevented, isTrust, view , screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, nút, nút, có liên quanTarget, pageX, pageY, isDefaultPrevented, isPropagationStopped, _dispatchListener, _dispatchList Nếu bạn có ý định kết xuất một bộ sưu tập trẻ em, hãy sử dụng một mảng thay thế hoặc bọc đối tượng bằng cách sử dụng createFragment (đối tượng) từ các tiện ích bổ sung React. Kiểm tra phương thức render của Welcome.

Nếu tôi thay đổi để this.onItemClick.bind(this, item)cho (e) => onItemClick(e, item)bên trong mọi thứ suôn sẻ chức năng bản đồ như mong đợi.

Nếu ai đó có thể giải thích những gì tôi đang làm sai và giải thích tại sao tôi gặp lỗi này, sẽ rất tuyệt

CẬP NHẬT 1:
chức năng onItemClick như sau và loại bỏ this.setState dẫn đến lỗi biến mất.

onItemClick(e, item) {
    this.setState({
      lang: item,
    });
}

Nhưng tôi không thể xóa dòng này vì tôi cần cập nhật trạng thái của thành phần này

Tôi đã gặp lỗi này và hóa ra là tôi đã vô tình bao gồm một Đối tượng trong mã JSX mà tôi đã dự kiến ​​là một giá trị chuỗi:

return (
    <BreadcrumbItem href={routeString}>
        {breadcrumbElement}
    </BreadcrumbItem>
)

breadcrumbElementđã từng là một chuỗi nhưng do một bộ tái cấu trúc đã trở thành một Object. Thật không may, thông báo lỗi của React đã không làm tốt việc chỉ cho tôi đến dòng vấn đề tồn tại. Tôi đã phải theo dõi ngăn xếp của mình trong suốt quá trình sao lưu cho đến khi tôi nhận ra "đạo cụ" được truyền vào một thành phần và sau đó tôi tìm thấy mã vi phạm.

Bạn sẽ cần tham chiếu một thuộc tính của đối tượng là giá trị chuỗi hoặc chuyển đổi Đối tượng thành biểu diễn chuỗi mong muốn. Một tùy chọn có thể là JSON.stringifynếu bạn thực sự muốn xem nội dung của Đối tượng.

Vì vậy, tôi đã gặp lỗi này khi cố gắng hiển thị thuộc createdAttính là đối tượng Date. Nếu bạn nối .toString()vào cuối như thế này, nó sẽ thực hiện chuyển đổi và loại bỏ lỗi. Chỉ cần đăng bài này như một câu trả lời có thể trong trường hợp bất kỳ ai khác gặp phải vấn đề tương tự:

{this.props.task.createdAt.toString()}

Tôi chỉ gặp lỗi tương tự nhưng do một lỗi khác: Tôi đã sử dụng niềng răng đôi như:

{{count}}

để chèn giá trị countthay vì đúng:

{count}

mà trình biên dịch có lẽ đã biến thành {{count: count}}, tức là cố gắng chèn một Object làm con React.

Chỉ cần nghĩ rằng tôi sẽ thêm vào điều này khi tôi gặp vấn đề tương tự ngày hôm nay, hóa ra đó là vì tôi đã trả lại chức năng, khi tôi gói nó trong một <div>thẻ nó bắt đầu hoạt động, như dưới đây

renderGallery() {
  const gallerySection = galleries.map((gallery, i) => {
    return (
      <div>
        ...
      </div>
    );
  });
  return (
    {gallerySection}
  );
}

Những điều trên gây ra lỗi. Tôi đã khắc phục sự cố bằng cách thay đổi return()phần thành:

return (
  <div>
    {gallerySection}
  </div>
);

...hoặc đơn giản:

return gallerySection

React con (số ít) phải là kiểu dữ liệu nguyên thủy không phải là đối tượng hoặc nó có thể là thẻ JSX (không có trong trường hợp của chúng tôi) . Sử dụng gói Proptypes trong phát triển để đảm bảo xác thực xảy ra.

Chỉ cần một so sánh đoạn mã nhanh (JSX) để thể hiện ý tưởng của bạn:

1. Lỗi: Với đối tượng được truyền vào con

   <div>
   {/* item is object with user's name and its other details on it */}
    {items.map((item, index) => {
     return <div key={index}>
   --item object invalid as react child--->>>{item}</div>;
    })}
   </div>

2. Không có lỗi: Với thuộc tính của đối tượng ( cần là nguyên thủy, tức là giá trị chuỗi hoặc giá trị số nguyên ) được truyền vào con.

   <div>
    {/* item is object with user's name and its other details on it */}
     {items.map((item, index) => {
      return <div key={index}>
   --note the name property is primitive--->{item.name}</div>;
     })}
   </div>

TLDR; (Từ nguồn bên dưới): Đảm bảo tất cả các mục mà bạn hiển thị trong JSX là nguyên thủy và không phải là đối tượng khi sử dụng React. Lỗi này thường xảy ra do một hàm liên quan đến việc gửi một sự kiện đã được đưa ra một loại đối tượng không mong muốn (nghĩa là truyền một đối tượng khi bạn nên truyền một chuỗi) hoặc một phần của JSX trong thành phần của bạn không tham chiếu đến một nguyên hàm (ví dụ this.props vs này.props.name).

Nguồn - mã hóabismuth.com

Của tôi phải làm với việc đặt các dấu ngoặc nhọn xung quanh một biến chứa phần tử HTML bên trong câu lệnh return của hàm render () một cách không cần thiết. Điều này khiến React coi nó như một đối tượng chứ không phải là một yếu tố.

render() {
  let element = (
    <div className="some-class">
      <span>Some text</span>
    </div>
  );

  return (
    {element}
  )
}

Khi tôi xóa dấu ngoặc nhọn khỏi phần tử, lỗi sẽ biến mất và phần tử được hiển thị chính xác.

Của tôi phải làm với việc quên các dấu ngoặc nhọn xung quanh các đạo cụ được gửi đến một thành phần trình bày:

Trước:

const TypeAheadInput = (name, options, onChange, value, error) => {

Sau

const TypeAheadInput = ({name, options, onChange, value, error}) => {

Tôi cũng đã nhận được lỗi "Đối tượng này không hợp lệ như một đứa trẻ React" và đối với tôi nguyên nhân là do gọi một hàm không đồng bộ trong JSX của tôi. Xem bên dưới.

class App extends React.Component {
    showHello = async () => {
        const response = await someAPI.get("/api/endpoint");

        // Even with response ignored in JSX below, this JSX is not immediately returned, 
        // causing "Objects are not valid as a React child" error.
        return (<div>Hello!</div>);
    }

    render() {
        return (
            <div>
                {this.showHello()}
            </div>
        );
    }
}

Điều tôi học được là kết xuất không đồng bộ không được hỗ trợ trong React. Nhóm React đang nghiên cứu một giải pháp như được ghi lại ở đây .

Đối với bất kỳ ai sử dụng Firebase với Android, điều này chỉ phá vỡ Android. Giả lập iOS của tôi bỏ qua nó.

Và như được đăng bởi Apoorv Bankey ở trên.

Bất cứ điều gì trên Firebase V5.0.3, đối với Android, atm là một sự phá sản. Sửa chữa:

npm i --save firebase@5.0.3

Xác nhận nhiều lần tại đây https://github.com/firebase/firebase-js-sdk/issues/871

Tôi cũng có vấn đề tương tự nhưng sai lầm của tôi là rất ngu ngốc. Tôi đã cố gắng truy cập đối tượng trực tiếp.

class App extends Component {
    state = {
        name:'xyz',
        age:10
    }
    render() {
        return (
            <div className="App">
                // this is what I am using which gives the error
                <p>I am inside the {state}.</p> 

                //Correct Way is

                <p>I am inside the {this.state.name}.</p> 
            </div>
        );
    }                                                                             

}

Nếu vì lý do nào đó bạn nhập căn cứ hỏa lực. Sau đó thử chạy npm i --save firebase@5.0.3. Điều này là do firebase break Reac -igen, vì vậy chạy nó sẽ khắc phục nó.

Trong trường hợp của tôi, tôi đã quên trả về một phần tử html từ hàm render và tôi đang trả về một đối tượng. Những gì tôi đã làm là tôi chỉ gói {items} bằng một phần tử html - một div đơn giản như bên dưới

<ul>{items}</ul>

Tôi gặp vấn đề tương tự vì tôi đã không đặt cái propsniềng răng xoăn.

export default function Hero(children, hero ) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

Vì vậy, nếu mã của bạn tương tự như ở trên thì bạn sẽ gặp lỗi này. Để giải quyết điều này chỉ cần đặt dấu ngoặc nhọn xung quanh props.

export default function Hero({ children, hero }) {
    return (
        <header className={hero}>
            {children}
        </header>
    );
}

Tôi đã nhận được cùng một lỗi, tôi đã thay đổi điều này

export default withAlert(Alerts)

đến đây

export default withAlert()(Alerts).

Trong các phiên bản cũ, mã cũ vẫn ổn, nhưng trong các phiên bản sau, nó lại báo lỗi. Vì vậy, sử dụng mã sau để tránh errror.

Trong trường hợp của tôi, lỗi đã xảy ra do tôi trả về mảng phần tử trong dấu ngoặc nhọn thay vì chỉ trả về mảng.

Mã có lỗi

   render() {
        var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>
        );
        return {rows};
    }

Mã chính xác

render() {
    var rows = this.props.products.map(product => <tr key={product.id}><td>{product.name}</td><td>{product.price}</td></tr>
    );
    return rows;
}

Bạn chỉ đang sử dụng các phím của đối tượng, thay vì toàn bộ đối tượng!

Thông tin chi tiết có thể được tìm thấy ở đây: https://github.com/gildata/RAIO/issues/48

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class SCT extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            data: this.props.data,
            new_data: {}
        };
    }
    componentDidMount() {
        let new_data = this.state.data;
        console.log(`new_data`, new_data);
        this.setState(
            {
                new_data: Object.assign({}, new_data)
            }
        )
    }
    render() {
        return (
            <div>
                this.state.data = {JSON.stringify(this.state.data)}
                <hr/>
                <div style={{color: 'red'}}>
                    {this.state.new_data.name}<br />
                    {this.state.new_data.description}<br />
                    {this.state.new_data.dependtables}<br />
                </div>
            </div>
        );
    }
}

SCT.propTypes = {
    test: PropTypes.string,
    data: PropTypes.object.isRequired
};

export {SCT};
export default SCT;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Tôi có cùng một vấn đề, trong trường hợp của tôi, tôi cập nhật các redux trạng thái và các tham số dữ liệu mới không khớp với các tham số cũ, vì vậy khi tôi muốn truy cập một số tham số thông qua Lỗi này,

Có lẽ kinh nghiệm này giúp được ai đó

Nếu bạn đang sử dụng Firebase và thấy lỗi này, bạn nên kiểm tra xem bạn có đang nhập đúng không. Kể từ phiên bản 5.0.4, bạn phải nhập nó như thế này:

import firebase from '@firebase/app'
import '@firebase/auth';
import '@firebase/database';
import '@firebase/storage';

Vâng tôi biết. Tôi đã mất 45 phút về điều này, quá.

Thông thường, điều này bật lên vì bạn không cấu trúc đúng. Lấy mã này làm ví dụ:

const Button = text => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

Chúng tôi đang tuyên bố nó với = text =>param. Nhưng thực sự, React đang kỳ vọng đây sẽ là một propsđối tượng bao gồm tất cả .

Vì vậy, chúng ta thực sự nên làm một cái gì đó như thế này:

const Button = props => <button>{props.text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

Chú ý sự khác biệt? Các propsparam ở đây có thể được đặt tên bất cứ điều gì (props chỉ là quy ước phù hợp với danh pháp), React chỉ mong đợi một đối tượng có khóa và vals.

Với việc phá hủy đối tượng bạn có thể làm và sẽ thường xuyên thấy, một cái gì đó như thế này:

const Button = ({ text }) => <button>{text}</button>

const SomeForm = () => (
  <Button text="Save" />
)

... mà hoạt động.

Rất có thể, bất cứ ai cũng vấp phải điều này chỉ vô tình tuyên bố thông số đạo cụ thành phần của họ mà không phá hủy.

Tôi chỉ đặt bản thân mình thông qua một phiên bản thực sự ngớ ngẩn của lỗi này, mà tôi cũng có thể chia sẻ ở đây cho hậu thế.

Tôi đã có một số JSX như thế này:

...
{
  ...
  <Foo />
  ...
}
...

Tôi cần phải bình luận điều này để gỡ lỗi một cái gì đó. Tôi đã sử dụng phím tắt trong IDE của mình, kết quả là:

...
{
  ...
  { /* <Foo /> */ }
  ...
}
...

Tất nhiên, đó là không hợp lệ - đối tượng không hợp lệ như trẻ em phản ứng!

Tôi muốn thêm một giải pháp khác vào danh sách này.

Thông số kỹ thuật:

• "phản ứng": "^ 16.2.0",
• "Reac-dom": "^ 16.2.0",
• "Reac-redux": "^ 5.0.6",
• "kịch bản phản ứng": "^ 1.0.17",
• "chuyển hướng": "^ 3.7.2"

Tôi gặp lỗi tương tự:

Uncaught Error: Các đối tượng không hợp lệ là con React (Found: object có khóa {XXXXX}). Nếu bạn có ý định kết xuất một bộ sưu tập trẻ em, thay vào đó hãy sử dụng một mảng.

Đây là mã của tôi:

let payload = {
      guess: this.userInput.value
};

this.props.dispatch(checkAnswer(payload));

Giải pháp:

  // let payload = {
  //   guess: this.userInput.value
  // };

this.props.dispatch(checkAnswer(this.userInput.value));

Vấn đề đã xảy ra vì tải trọng đã gửi vật phẩm như một đối tượng. Khi tôi loại bỏ biến tải trọng và đưa giá trị userInput vào công văn, mọi thứ bắt đầu hoạt động như mong đợi.

Nếu trong trường hợp bạn sử dụng Firebase, bất kỳ tệp nào trong dự án của bạn. Sau đó, chỉ cần đặt câu lệnh nhập căn cứ vào cuối !!

Tôi biết điều này nghe có vẻ điên rồ nhưng hãy thử nó !!

Vấn đề của tôi rất đơn giản khi tôi gặp phải lỗi sau:

objects are not valid as a react child (found object with keys {...}

chỉ là tôi đã truyền một đối tượng với các khóa được chỉ định trong lỗi trong khi cố gắng kết xuất trực tiếp đối tượng trong một thành phần bằng cách sử dụng {object} để mong nó là một chuỗi

object: {
    key1: "key1",
    key2: "key2"
}

Trong khi kết xuất trên Thành phần Phản ứng, tôi đã sử dụng một cái gì đó như dưới đây

render() {
    return this.props.object;
}

nhưng nó nên có

render() {
    return this.props.object.key1;
}

Nếu sử dụng các thành phần không trạng thái, hãy làm theo loại định dạng này:

const Header = ({pageTitle}) => (
  <h1>{pageTitle}</h1>
);
export {Header};

Điều này dường như làm việc cho tôi

Một cái gì đó như thế này vừa xảy ra với tôi ...

Tôi đã viết:

{response.isDisplayOptions &&
{element}
}

Đặt nó bên trong một div đã sửa nó:

{response.isDisplayOptions &&
    <div>
        {element}
    </div>
}

Tìm thấy: đối tượng có khóa

Có nghĩa là bạn vượt qua một cái gì đó là một giá trị quan trọng. Vì vậy, bạn cần sửa đổi xử lý của bạn:

onItemClick(e, item) {
   this.setState({
     lang: item,
   });
}

onItemClick({e, item}) {
  this.setState({
    lang: item,
  });
}

Bạn đã bỏ lỡ niềng răng ( {}).

Trong trường hợp của tôi, tôi đã thêm một async vào thành phần chức năng con của mình và gặp phải lỗi này. Không sử dụng async với thành phần con.

Trong trường hợp sử dụng Firebase, nếu nó không hoạt động bằng cách đặt ở cuối importcâu lệnh thì bạn có thể thử đặt nó vào một trong các phương thức vòng đời, nghĩa là bạn có thể đặt nó vào bên trong componentWillMount().

componentWillMount() {
    const firebase = require('firebase');
    firebase.initializeApp({
        //Credentials
    });
}

Invariant Violation: Objects are not valid as a React childđã xảy ra với tôi khi sử dụng một thành phần cần một renderItemđạo cụ, như:

renderItem={this.renderItem}

và sai lầm của tôi là thực hiện renderItemphương pháp của tôi async.

Lỗi của tôi là do viết nó theo cách này:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff} </p>)
})

thay vì:

props.allinfo.map((stuff, i)=>{
  return (<p key={i}> I am {stuff.name} </p>)
})

Nó có nghĩa là tôi đã cố gắng kết xuất đối tượng thay vì giá trị bên trong nó.

chỉnh sửa: đây là phản ứng không bản địa.