Phản ứng: tại sao thành phần con không cập nhật khi thay đổi prop

Tại sao trong ví dụ mã giả sau đây Trẻ không kết xuất lại khi Container thay đổi foo.bar?

Container {
  handleEvent() {
    this.props.foo.bar = 123
  },

  render() {
    return <Child bar={this.props.foo.bar} />
}

Child {
  render() {
    return <div>{this.props.bar}</div>
  }
}

Ngay cả khi tôi gọi forceUpdate()sau khi sửa đổi giá trị trong Container, Child vẫn hiển thị giá trị cũ.

Cập nhật con để có 'khóa' thuộc tính bằng tên. Thành phần sẽ kết xuất lại mỗi khi phím thay đổi.

Child {
  render() {
    return <div key={this.props.bar}>{this.props.bar}</div>
  }
}

Bởi vì trẻ em không chạy lại nếu đạo cụ của cha mẹ thay đổi, nhưng nếu NHÀ NƯỚC của nó thay đổi :)

Những gì bạn đang hiển thị là đây: https://facebook.github.io/react/tips/c truyềnicate-b between-components.html

Nó sẽ truyền dữ liệu từ cha mẹ sang con thông qua các đạo cụ nhưng không có logic tái lập ở đó.

Bạn cần thiết lập một số trạng thái cho cha mẹ sau đó đăng ký lại cho con về trạng thái thay đổi của cha mẹ. Điều này có thể giúp đỡ. https://facebook.github.io/react/tips/expose-component-fifts.html

Tôi đã từng gặp vấn đề tương tự. Đây là giải pháp của tôi, tôi không chắc đó là cách thực hành tốt, hãy nói cho tôi biết nếu không:

state = {
  value: this.props.value
};

componentDidUpdate(prevProps) {
  if(prevProps.value !== this.props.value) {
    this.setState({value: this.props.value});
  }
}

CẬP NHẬT: Bây giờ bạn có thể làm điều tương tự bằng React Hook: (chỉ khi thành phần là một hàm)

const [value, setValue] = useState(propName);
// This will launch only if propName value has chaged.
useEffect(() => { setValue(propName) }, [propName]);

Theo thành phần triết lý React không thể thay đổi đạo cụ của nó. chúng nên được nhận từ cha mẹ và nên bất biến. Chỉ có cha mẹ có thể thay đổi đạo cụ của con cái của nó.

giải thích tốt về nhà nước vs đạo cụ

Ngoài ra, hãy đọc chủ đề này Tại sao tôi không thể cập nhật đạo cụ trong Reac.js?

Bạn nên sử dụng setStatechức năng. Nếu không, nhà nước sẽ không lưu thay đổi của bạn, bất kể bạn sử dụng ForceUpdate như thế nào.

Container {
    handleEvent= () => { // use arrow function
        //this.props.foo.bar = 123
        //You should use setState to set value like this:
        this.setState({foo: {bar: 123}});
    };

    render() {
        return <Child bar={this.state.foo.bar} />
    }
    Child {
        render() {
            return <div>{this.props.bar}</div>
        }
    }
}

Mã của bạn có vẻ không hợp lệ. Tôi không thể kiểm tra mã này.

Khi tạo các thành phần React từ functionsvà useState.

const [drawerState, setDrawerState] = useState(false);

const toggleDrawer = () => {
      // attempting to trigger re-render
      setDrawerState(!drawerState);
};

Cái này không hoạt động

         <Drawer
            drawerState={drawerState}
            toggleDrawer={toggleDrawer}
         />

Điều này không hoạt động (thêm khóa)

         <Drawer
            drawerState={drawerState}
            key={drawerState}
            toggleDrawer={toggleDrawer}
         />

Xác nhận, thêm một công trình chính. Tôi đã đi qua các tài liệu để thử và hiểu lý do tại sao.

React muốn hiệu quả khi tạo các thành phần con. Nó sẽ không hiển thị một thành phần mới nếu nó giống với một đứa trẻ khác, khiến trang tải nhanh hơn.

Thêm một khóa buộc React để hiển thị một thành phần mới, do đó đặt lại Trạng thái cho thành phần mới đó.

https://reactjs.org/docs/reconcestion.html#recursing-on-children

Sử dụng hàm setState. Vì vậy, bạn có thể làm

       this.setState({this.state.foo.bar:123}) 

bên trong phương thức xử lý sự kiện.

Khi trạng thái được cập nhật, nó sẽ kích hoạt các thay đổi và kết xuất lại sẽ diễn ra.

Bạn có lẽ nên biến Child thành thành phần chức năng nếu nó không duy trì bất kỳ trạng thái nào và chỉ cần kết xuất các đạo cụ và sau đó gọi nó từ cha mẹ. Thay thế cho điều này là bạn có thể sử dụng các hook với thành phần chức năng (useState) sẽ khiến thành phần không trạng thái hiển thị lại.

Ngoài ra, bạn không nên thay đổi propas vì chúng là bất biến. Duy trì trạng thái của thành phần.

Child = ({bar}) => (bar);

Tôi đã gặp phải vấn đề tương tự. Tôi có một Tooltipthành phần đang nhận showTooltipprop, mà tôi đang cập nhật trên Parentthành phần dựa trên một ifđiều kiện, nó đang được cập nhật trong Parentthành phần nhưng Tooltipthành phần không được kết xuất.

const Parent = () => {
   let showTooltip = false;
   if(....){ showTooltip = true; }
   return(
      <Tooltip showTooltip={showTooltip}></Tooltip>
   )
}

Sai lầm tôi đã làm là tuyên bố showTooltiplà cho phép.

Tôi nhận ra những gì tôi đã làm sai Tôi đã vi phạm các nguyên tắc về cách hoạt động của kết xuất, Thay thế nó bằng các móc đã thực hiện công việc.

const [showTooltip, setShowTooltip] =  React.useState<boolean>(false);

định nghĩa các đạo cụ đã thay đổi trong mapStateToProps của phương thức kết nối trong thành phần con.

function mapStateToProps(state) {
  return {
    chanelList: state.messaging.chanelList,
  };
}

export default connect(mapStateToProps)(ChannelItem);

Trong trường hợp của tôi, kênh của channelList được cập nhật nên tôi đã thêm chanelList trong mapStateToProps